/**
 * Showcase · ACME marketing website — a TOKEN-ONLY rebuild of the Claude Design `ui_kits/website`.
 *
 * Proves the hard brief: a CONSUMER agent, given a Claude Design export, reproduces a full marketing
 * landing page from **token configuration + a brand stylesheet + REAL @godxjp/ui primitives** — with
 * NO new framework components. Per docs/COMPOSITION-VS-COMPONENT.md, marketing sections (Navbar,
 * Hero, CTA, Footer) FAIL the Framework-Component Test, so they are COMPOSITION: layout `<section>`s
 * arranging Card / Button / Text / Avatar / ResponsiveGrid / Flex.
 *
 * The brand-specific styling lives in the `THEME` <style> block (a consumer's own stylesheet) — the
 * design's tokens + a few marketing type/section classes + per-region role scoping for the navy
 * sections. The TSX stays clean: real primitives + semantic class names, no arbitrary utilities.
 */
import * as React from "react";
import {
  ArrowRight,
  ChevronDown,
  CreditCard,
  Globe,
  Link2,
  Mail,
  PackageCheck,
  Phone,
  Plus,
  Receipt,
  Scale,
  Search,
  ShieldCheck,
  ShoppingCart,
  Ship,
  UserPlus,
  Warehouse,
} from "lucide-react";

import { Button, Heading, Icon, Text } from "@godxjp/ui/general";
import { Avatar, AvatarFallback, Card, CardContent, CardCover } from "@godxjp/ui/data-display";
import { Flex, ResponsiveGrid } from "@godxjp/ui/layout";

// ── Brand stylesheet: the design's tokens + marketing type/section classes + navy role-scoping. ───
// This is what a consumer ships as their own theme.css — raw brand values live HERE (CSS), not as
// arbitrary utilities in the markup. The page below reads it via semantic class names only.
const THEME = `
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');
[data-tenant="acme-web"] {
  --primary: 41 73% 53%; --primary-foreground: 217 61% 12%; --ring: 41 73% 53%;
  --accent: 42 81% 96%; --accent-foreground: 41 72% 44%;
  --background: 210 33% 97%; --foreground: 217 61% 12%;
  --card: 0 0% 100%; --card-foreground: 217 61% 12%;
  --secondary: 217 61% 12%; --secondary-foreground: 0 0% 100%;
  --muted: 214 27% 95%; --muted-foreground: 216 14% 37%;
  /* --input is the CONTROL boundary, held to 3:1 (SC 1.4.11): 3.33 on the page, 3.57 on a card,
     3.18 on --muted. It was 216 16% 80% = 1.46:1. --border is decorative chrome; it stays. */
  --border: 214 27% 90%; --input: 216 16% 55%;
  --success: 152 100% 25%; --warning: 41 73% 53%; --destructive: 11 82% 56%; --info: 203 100% 37%;
  --letter-spacing-tight: -0.02em; /* the display tracking .tx-display/.tx-h2 hand-wrote, once */
  --radius: 0.875rem; --radius-md: 10px; --radius-lg: 14px;
  --card-radius: var(--radius); --control-radius: var(--radius);
  --shadow-color: 38 79 145;
  --card-shadow: 0 1px 3px rgb(38 79 145 / 0.08), 0 1px 2px rgb(38 79 145 / 0.06);
  --shadow-glow: 0 8px 20px hsl(41 73% 53% / 0.32);
  --focus-ring-color: 41 73% 53%;
  --font-family-display: "Source Sans 3", system-ui, sans-serif;
  --font-family-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-sans: var(--font-family-body);
  --text-brand: 41 84% 26%;          /* dark gold, eyebrows clear AA on light sections */
  /* The glass bar, opted into once (gh#831). These two used to be a literal 0.85 alpha and a
     literal 10px blur on .tx-navbar. futurelastic-web.tsx hand-wrote the identical pair. */
  --topbar-background-alpha: 85%;
  --topbar-backdrop-blur-size: 10px;
}
/* Marketing layout + type (a consumer's section stylesheet) */
[data-tenant="acme-web"] .tx-shell { margin-inline: auto; width: 100%; max-inline-size: var(--page-measure-wide);
  padding-inline: var(--space-8);
  /* ResponsiveGrid uses @container queries, so establish the container here (PageContainer does this
   * in an app; a marketing composition provides it on its own shell). */
  container-type: inline-size; }
[data-tenant="acme-web"] .tx-section { padding-block: var(--space-section-band); }
/* The sticky header IS this page's bar region, so it reads the --topbar-* glass knobs. It is not a
   <Topbar> for one reason: the glass must span the full bleed while the bar's CONTENT stays on the
   .tx-shell measure, and Topbar is a single flex row with no inner shell. */
[data-tenant="acme-web"] .tx-navbar { position: sticky; inset-block-start: 0; z-index: 30;
  background-color: hsl(var(--background) / var(--topbar-background-alpha));
  backdrop-filter: blur(var(--topbar-backdrop-blur-size));
  border-block-end: var(--stroke-hairline) solid hsl(var(--border)); }
[data-tenant="acme-web"] .tx-navbar-inner { height: 72px; display: flex; align-items: center; gap: 2.25rem; }
[data-tenant="acme-web"] .tx-brand { font-family: var(--font-family-display); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.01em; color: hsl(var(--foreground)); }
[data-tenant="acme-web"] .tx-eyebrow { font-family: var(--font-family-display); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--text-brand)); }
/* .tx-display / .tx-h2 / .tx-lead are GONE (gh#826). They existed only because the display type
   ramp had tokens and no prop, so all three were a raw font-size plus the leading that has to come
   with it. They are now Heading size="5xl", Heading size="4xl" and Text size="xl". The
   brand face is not lost with them: base.css already points every <h1>-<h6> at
   --font-family-display, which the token block above sets. The one knob those classes carried that
   is genuinely brand and not scale is the display tracking, and it IS a token — set once, below. */
/* --text-brand, not --primary (gh#643): --primary is a FILL role, and as ink it measured
   2.01:1 here. The AA-safe text tier already exists and .tx-eyebrow above already reads it. */
[data-tenant="acme-web"] .tx-gold { color: hsl(var(--text-brand)); }
[data-tenant="acme-web"] .tx-stat { font-family: var(--font-family-display); font-weight: 800; font-size: 1.75rem; color: hsl(var(--primary)); }
[data-tenant="acme-web"] .tx-hero-grid { display: grid; gap: var(--space-12); align-items: center; padding-block: var(--space-section-hero); }
@media (min-width: 1024px) { [data-tenant="acme-web"] .tx-hero-grid { grid-template-columns: 1.1fr 0.9fr; } }
/* .tx-glow* are GONE too: .ui-brand-glow shipped with exactly this gradient and these four
   knobs, and nothing in the repo referenced it while four sections hand-wrote it (gh#826). The
   halo's position/size/alpha are now per-instance token overrides at the call site. */
[data-tenant="acme-web"] .tx-field { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
  background: hsl(0 0% 100% / 0.08); border-radius: var(--radius-md); }
[data-tenant="acme-web"] .tx-quote-total { display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 1rem; background: hsl(var(--primary)); border-radius: var(--radius-md); }
[data-tenant="acme-web"] .tx-route-flag { height: 80px; display: flex; align-items: center; justify-content: center; background: hsl(217 49% 24%); }
[data-tenant="acme-web"] .tx-route-code { font-family: var(--font-family-display); font-weight: 800; font-size: 1.75rem; letter-spacing: 0.05em; color: hsl(var(--primary)); }
[data-tenant="acme-web"] .tx-footer-grid { display: grid; gap: 2.25rem; }
@media (min-width: 768px) { [data-tenant="acme-web"] .tx-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
[data-tenant="acme-web"] .tx-footer-bottom { display: flex; align-items: center; justify-content: space-between;
  margin-block-start: 2.25rem; padding-block-start: var(--space-5); border-block-start: var(--stroke-hairline) solid hsl(0 0% 100% / 0.1); }
/* Navy region: role scoping so descendants render on-dark (white text, glass cards, outline btns). */
[data-tenant="acme-web"] .tx-navy {
  background: hsl(217 61% 12%); --foreground: 0 0% 100%;
  --card: 217 45% 18%; --card-foreground: 0 0% 100%;
  --card-background: hsl(0 0% 100% / 0.06); --card-border: 0 0% 100% / 0.12;
  --muted-foreground: 214 36% 80%; --border: 214 30% 30%; --input: 214 24% 60%; --background: 217 61% 12%;
  --text-brand: 41 80% 62%;  /* light gold, eyebrows clear AA on the navy regions */
}
[data-tenant="acme-web"] .tx-navy-deep { background: hsl(217 61% 9%); }
`;

const SHELL = "tx-shell";

function Navbar() {
  const links = ["Mua hộ", "Vận chuyển", "Bảng giá", "Tra cứu", "Về chúng tôi"];
  return (
    <header className="tx-navbar">
      <div className={`${SHELL} tx-navbar-inner`}>
        <span className="tx-brand" data-logotype="">
          TIXI<span className="tx-gold">MAX</span>
        </span>
        <Flex direction="row" gap="xs" align="center">
          {links.map((l, i) => (
            <Button key={l} variant="ghost" size="sm" aria-current={i === 0 ? "page" : undefined}>
              {l}
            </Button>
          ))}
        </Flex>
        <Flex direction="row" gap="sm" align="center" className="ms-auto">
          <Button variant="ghost" size="sm">
            Đăng nhập
          </Button>
          <Button size="sm">
            <Plus aria-hidden="true" />
            Tạo đơn mua hộ
          </Button>
        </Flex>
      </div>
    </header>
  );
}

function Hero() {
  const stats: Array<[string, string]> = [
    ["120K+", "Đơn đã giao"],
    ["6", "Quốc gia"],
    ["12–18", "Ngày vận chuyển"],
  ];
  const fields: Array<[typeof Globe, string, string]> = [
    [Globe, "Quốc gia", "Nhật Bản"],
    [Scale, "Cân nặng (kg)", "3.5 kg"],
  ];
  return (
    <section className="tx-navy relative overflow-hidden">
      <div
        className="ui-brand-glow absolute inset-0"
        style={
          {
            "--brand-glow-size": "40% 50%",
            "--brand-glow-position": "88% -10%",
            "--brand-glow-alpha": "0.22",
          } as React.CSSProperties
        }
      />
      <div className={`${SHELL} tx-hero-grid relative`}>
        <Flex direction="col" gap="xl">
          <div className="tx-eyebrow">Mua hộ &amp; vận chuyển quốc tế</div>
          <Heading level={1} size="5xl" weight="bold">
            Mua sắm toàn cầu,
            <br />
            <span className="tx-gold">ACME</span> lo phần còn lại.
          </Heading>
          <Text as="p" size="xl" tone="muted">
            Đặt mua, thanh toán và vận chuyển hàng từ Nhật, Hàn, Indonesia và Mỹ về tận nhà. Minh
            bạch chi phí, theo dõi từng bước.
          </Text>
          <Flex direction="row" gap="md">
            <Button size="lg">
              Nhận báo giá miễn phí
              <ArrowRight aria-hidden="true" />
            </Button>
            <Button variant="outline" size="lg">
              <Search aria-hidden="true" />
              Tra cứu đơn
            </Button>
          </Flex>
          <Flex direction="row" gap="lg">
            {stats.map(([n, l]) => (
              <div key={l}>
                <div className="tx-stat">{n}</div>
                <Text as="div" size="xs" tone="muted">
                  {l}
                </Text>
              </div>
            ))}
          </Flex>
        </Flex>

        <Card>
          <CardContent>
            <Flex direction="col" gap="md">
              <div className="tx-eyebrow">Ước tính phí vận chuyển</div>
              <Flex direction="col" gap="sm">
                {fields.map(([Glyph, label, value]) => (
                  <div key={label} className="tx-field">
                    <Icon as={Glyph} size="lg" className="tx-gold" />
                    <div className="min-w-0 flex-1">
                      <Text as="div" size="2xs" tone="muted">
                        {label}
                      </Text>
                      <Text as="div" weight="bold">
                        {value}
                      </Text>
                    </div>
                    <Icon as={ChevronDown} size="lg" />
                  </div>
                ))}
                <div className="tx-quote-total">
                  <Text as="span" weight="bold" className="text-primary-foreground">
                    Tạm tính
                  </Text>
                  <Text as="span" weight="bold" size="2xl" className="text-primary-foreground">
                    525.000đ
                  </Text>
                </div>
              </Flex>
            </Flex>
          </CardContent>
        </Card>
      </div>
    </section>
  );
}

function SectionHead({
  eyebrow,
  title,
  sub,
  center,
}: {
  eyebrow: string;
  title: string;
  sub?: string;
  center?: boolean;
}) {
  return (
    <div className={center ? "mx-auto text-center" : undefined}>
      <div className="tx-eyebrow">{eyebrow}</div>
      <Heading level={2} size="4xl" weight="bold">
        {title}
      </Heading>
      {sub ? (
        <Text as="p" size="xl" tone="muted" className="mx-auto">
          {sub}
        </Text>
      ) : null}
    </div>
  );
}

function Medallion({ icon: Glyph }: { icon: typeof Globe }) {
  return (
    <Avatar className="rounded-md">
      <AvatarFallback className="bg-primary/10 text-primary rounded-md">
        <Icon as={Glyph} size="lg" />
      </AvatarFallback>
    </Avatar>
  );
}

function Services() {
  const items: Array<[typeof Globe, string, string]> = [
    [
      ShoppingCart,
      "Mua hộ",
      "Gửi link sản phẩm, ACME đặt mua và thanh toán giúp bạn với tỷ giá minh bạch.",
    ],
    [Ship, "Vận chuyển", "Đường biển và đường bay từ Nhật, Hàn, Indonesia, Mỹ về Việt Nam."],
    [Warehouse, "Gom hàng", "Gom nhiều đơn vào một kiện để tiết kiệm tối đa chi phí vận chuyển."],
    [
      ShieldCheck,
      "Bảo hiểm hàng hóa",
      "Bảo vệ giá trị đơn hàng trong suốt quá trình vận chuyển quốc tế.",
    ],
  ];
  return (
    <section className="bg-card tx-section">
      <Flex direction="col" gap="xl" className={SHELL}>
        <SectionHead
          center
          eyebrow="Dịch vụ"
          title="Một điểm chạm, trọn quy trình"
          sub="Từ lúc bạn thấy món hàng ở nước ngoài đến khi nó nằm trong tay bạn."
        />
        <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
          {items.map(([icon, t, d]) => (
            <Card key={t}>
              <CardContent>
                <Flex direction="col" gap="md">
                  <Medallion icon={icon} />
                  <Text as="div" weight="bold" size="lg">
                    {t}
                  </Text>
                  <Text as="p" size="sm" tone="muted">
                    {d}
                  </Text>
                </Flex>
              </CardContent>
            </Card>
          ))}
        </ResponsiveGrid>
      </Flex>
    </section>
  );
}

function Steps() {
  const steps: Array<[typeof Globe, string, string]> = [
    [Link2, "Gửi link sản phẩm", "Dán đường link món hàng bạn muốn mua từ bất kỳ trang nào."],
    [Receipt, "Nhận báo giá", "ACME báo giá tiền hàng và phí vận chuyển trong vài phút."],
    [CreditCard, "Thanh toán", "Đặt cọc hoặc thanh toán toàn bộ, chúng tôi đặt mua ngay."],
    [PackageCheck, "Nhận hàng tận nơi", "Theo dõi đơn theo thời gian thực đến khi giao tận nhà."],
  ];
  return (
    <section className="bg-background tx-section">
      <Flex direction="col" gap="xl" className={SHELL}>
        <SectionHead eyebrow="Quy trình" title="Mua hàng quốc tế trong 4 bước" />
        <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
          {steps.map(([Glyph, t, d], i) => (
            <Flex direction="col" gap="md" key={t}>
              <Flex direction="row" gap="sm" align="center">
                <Avatar>
                  <AvatarFallback className="bg-secondary text-primary font-bold">
                    {i + 1}
                  </AvatarFallback>
                </Avatar>
                <Icon as={Glyph} size="xl" className="text-brand" />
              </Flex>
              <Text as="div" weight="bold" size="lg">
                {t}
              </Text>
              <Text as="p" size="sm" tone="muted">
                {d}
              </Text>
            </Flex>
          ))}
        </ResponsiveGrid>
      </Flex>
    </section>
  );
}

function Routes() {
  const routes: Array<[string, string, string, string]> = [
    ["Nhật Bản", "JP", "Đường bay · 5–7 ngày", "210.000đ/kg"],
    ["Hàn Quốc", "KR", "Đường bay · 4–6 ngày", "180.000đ/kg"],
    ["Indonesia", "ID", "Đường biển · 12–18 ngày", "38.000đ/kg"],
    ["Hoa Kỳ", "US", "Đường bay · 7–10 ngày", "260.000đ/kg"],
  ];
  return (
    <section className="bg-card tx-section">
      <Flex direction="col" gap="xl" className={SHELL}>
        <SectionHead eyebrow="Tuyến vận chuyển" title="Giá cước rõ ràng theo từng tuyến" />
        <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
          {routes.map(([c, code, mode, price]) => (
            <Card key={c} className="overflow-hidden">
              <CardCover className="tx-route-flag">
                <span className="tx-route-code">{code}</span>
              </CardCover>
              <CardContent>
                <Flex direction="col" gap="md">
                  <Text as="div" weight="bold" size="lg">
                    {c}
                  </Text>
                  <Text as="div" size="xs" tone="muted">
                    {mode}
                  </Text>
                  <Text as="div" weight="bold" size="2xl">
                    {price}
                  </Text>
                </Flex>
              </CardContent>
            </Card>
          ))}
        </ResponsiveGrid>
      </Flex>
    </section>
  );
}

function CtaBanner() {
  return (
    <section className="tx-navy tx-section relative overflow-hidden">
      <div
        className="ui-brand-glow absolute inset-0"
        style={
          {
            "--brand-glow-size": "40% 50%",
            "--brand-glow-position": "12% 120%",
          } as React.CSSProperties
        }
      />
      <div className={`${SHELL} relative text-center`}>
        <Heading level={2} size="4xl" weight="bold">
          Sẵn sàng cho đơn hàng đầu tiên?
        </Heading>
        <Text as="p" size="xl" tone="muted" className="mx-auto">
          Tạo tài khoản miễn phí và nhận báo giá trong 5 phút.
        </Text>
        <Flex direction="row" gap="md" justify="center">
          <Button size="lg">
            <UserPlus aria-hidden="true" />
            Đăng ký ngay
          </Button>
          <Button variant="outline" size="lg">
            Liên hệ tư vấn
          </Button>
        </Flex>
      </div>
    </section>
  );
}

function Footer() {
  const cols: Array<[string, string[]]> = [
    ["Dịch vụ", ["Mua hộ", "Vận chuyển", "Gom hàng", "Bảng giá"]],
    ["Công ty", ["Về ACME", "Tuyển dụng", "Tin tức", "Liên hệ"]],
    ["Hỗ trợ", ["Tra cứu đơn", "Câu hỏi thường gặp", "Chính sách", "Điều khoản"]],
  ];
  return (
    <footer className="tx-navy tx-navy-deep">
      <div className={`${SHELL} tx-footer-grid`} style={{ paddingBlock: "3.5rem var(--space-8)" }}>
        <Flex direction="col" gap="md">
          <span className="tx-brand">
            TIXI<span className="tx-gold">MAX</span>
          </span>
          <Text as="p" size="sm" tone="muted">
            Dịch vụ mua hộ &amp; vận chuyển quốc tế uy tín, minh bạch về tận nhà bạn.
          </Text>
        </Flex>
        {cols.map(([h, items]) => (
          <Flex direction="col" gap="md" key={h}>
            <div className="tx-eyebrow">{h}</div>
            <Flex direction="col" gap="xs">
              {items.map((i) => (
                <Button
                  key={i}
                  variant="link"
                  size="sm"
                  className="text-muted-foreground justify-start"
                >
                  {i}
                </Button>
              ))}
            </Flex>
          </Flex>
        ))}
      </div>
      <div className={`${SHELL} tx-footer-bottom`}>
        <Text as="span" size="xs" tone="muted">
          2026 ACME Logistics. All rights reserved.
        </Text>
        <Flex direction="row" gap="md">
          {[Mail, Phone, Globe].map((Glyph, i) => (
            <Icon key={i} as={Glyph} size="lg" tone="muted" />
          ))}
        </Flex>
      </div>
    </footer>
  );
}

export default function AcmeWebsiteShowcase() {
  return (
    <div data-tenant="acme-web" className="bg-background min-h-screen">
      <style>{THEME}</style>
      <Navbar />
      <Hero />
      <Services />
      <Steps />
      <Routes />
      <CtaBanner />
      <Footer />
    </div>
  );
}