"use client";

import { Copy } from "lucide-react";

export default function DomainsPage() {
  return (
    <div
      style={{
        padding: "32px 48px",
        fontFamily: '"Outfit", "Inter", sans-serif',
        color: "#18181b",
        maxWidth: 900,
      }}
    >
      <div style={{ marginBottom: 32 }}>
        <h1
          style={{ fontSize: "1.5rem", fontWeight: 600, margin: "0 0 4px 0" }}
        >
          Domains
        </h1>
        <p style={{ fontSize: "0.9rem", color: "#71717a", margin: 0 }}>
          Buy, connect and manage your domains.{" "}
          <a href="#" style={{ color: "#18181b", textDecoration: "underline" }}>
            Learn more
          </a>
        </p>
      </div>

      <div
        style={{
          background: "#fff",
          border: "1px solid #e4e4e7",
          borderRadius: 12,
          padding: "24px",
          marginBottom: 32,
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            marginBottom: 16,
          }}
        >
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <h2 style={{ fontSize: "1rem", fontWeight: 600, margin: 0 }}>
              Built-in URL
            </h2>
          </div>
          <button
            style={{
              background: "#fff",
              border: "1px solid #e4e4e7",
              borderRadius: 6,
              padding: "6px 12px",
              fontSize: "0.85rem",
              fontWeight: 500,
              cursor: "pointer",
            }}
          >
            Edit URL
          </button>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <div
            style={{
              flex: 1,
              background: "#fafafa",
              border: "1px solid #e4e4e7",
              borderRadius: 8,
              padding: "10px 16px",
              fontSize: "0.9rem",
              color: "#71717a",
              display: "flex",
              alignItems: "center",
            }}
          >
            <span style={{ color: "#18181b", fontWeight: 500 }}>
              steadfast-camp-core-flow
            </span>
            .vibn.app
          </div>
          <button
            style={{
              width: 40,
              height: 40,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              background: "#fff",
              border: "1px solid #e4e4e7",
              borderRadius: 8,
              cursor: "pointer",
            }}
          >
            <Copy size={16} color="#71717a" />
          </button>
        </div>
      </div>

      <h2 style={{ fontSize: "1.1rem", fontWeight: 600, margin: "0 0 16px 0" }}>
        Custom domains
      </h2>
      <div
        style={{
          background: "#fff",
          border: "1px solid #e4e4e7",
          borderRadius: 12,
          borderStyle: "dashed",
          padding: "48px 32px",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          marginBottom: 32,
        }}
      >
        <h3
          style={{ fontSize: "1.1rem", fontWeight: 600, margin: "0 0 8px 0" }}
        >
          Want to use your domain?
        </h3>
        <p
          style={{
            fontSize: "0.95rem",
            color: "#71717a",
            textAlign: "center",
            maxWidth: 400,
            margin: "0 0 24px 0",
            lineHeight: 1.5,
          }}
        >
          Custom domains are available on our Builder plan and above. Upgrade to
          continue working to this app.
        </p>
        <button
          style={{
            background: "#18181b",
            color: "#fff",
            border: "none",
            borderRadius: 8,
            padding: "10px 24px",
            fontSize: "0.9rem",
            fontWeight: 600,
            cursor: "pointer",
          }}
        >
          View Plans
        </button>
      </div>

      <div
        style={{
          background: "#fff",
          border: "1px solid #e4e4e7",
          borderRadius: 12,
          padding: "24px",
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-start",
            marginBottom: 16,
          }}
        >
          <div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: 8,
                marginBottom: 16,
              }}
            >
              <h2 style={{ fontSize: "1rem", fontWeight: 600, margin: 0 }}>
                Email domain
              </h2>
              <span
                style={{
                  fontSize: "0.75rem",
                  fontWeight: 600,
                  color: "#f97316",
                  border: "1px solid #ffedd5",
                  background: "#fff7ed",
                  padding: "2px 6px",
                  borderRadius: 4,
                }}
              >
                Builder+
              </span>
            </div>
            <div
              style={{
                fontSize: "0.95rem",
                fontWeight: 500,
                color: "#18181b",
                marginBottom: 4,
              }}
            >
              no-reply@notifications.vibn.app
            </div>
            <div style={{ fontSize: "0.85rem", color: "#71717a" }}>
              Sender Name: App
            </div>
          </div>
          <button
            style={{
              background: "#fff",
              border: "1px solid #e4e4e7",
              borderRadius: 6,
              padding: "8px 16px",
              fontSize: "0.85rem",
              fontWeight: 500,
              cursor: "pointer",
              color: "#71717a",
            }}
          >
            Use your custom domain
          </button>
        </div>
      </div>
    </div>
  );
}