// Cortile marketing site — sections part 1: Nav, Hero, PhoneMockup, Value, Features.
// Composes design-system primitives from the DS bundle namespace.
const DS = window.CortileDesignSystem_c3fab1;
const { Button, Badge, FeatureCard, IconTile } = DS;

const SANS = "var(--font-sans)";
const SERIF = "var(--font-serif)";
const MANAGER_LOGIN_URL = "https://admin.enolent.com";

function LIcon({ name, size = 20, stroke = 1.85, color = "currentColor", style }) {
  return <i data-lucide={name} style={{ width: size, height: size, color, strokeWidth: stroke, ...style }} />;
}

function Container({ children, style }) {
  return (
    <div style={{ width: "100%", maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 24px", boxSizing: "border-box", ...style }}>
      {children}
    </div>
  );
}

function Eyebrow({ children, color = "var(--neutral-500)" }) {
  return (
    <div style={{ fontFamily: SANS, fontWeight: 700, fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color }}>
      {children}
    </div>
  );
}

function SectionHead({ eyebrow, title, sub, align = "center", maxW = 640 }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12, alignItems: align === "center" ? "center" : "flex-start", textAlign: align, maxWidth: maxW, margin: align === "center" ? "0 auto" : 0 }}>
      <Eyebrow color="var(--primary-600)">{eyebrow}</Eyebrow>
      <h2 style={{ margin: 0, fontFamily: SERIF, fontWeight: 900, fontSize: 34, lineHeight: 1.25, color: "var(--neutral-900)", letterSpacing: "0.01em" }}>{title}</h2>
      {sub && <p style={{ margin: 0, fontFamily: SANS, fontSize: 16, lineHeight: 1.65, color: "var(--neutral-600)", textWrap: "pretty" }}>{sub}</p>}
    </div>
  );
}

// ─────────────────────────── Nav ───────────────────────────
function Nav({ t, lang, setLang }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const closeMenu = () => setMenuOpen(false);
  const navItems = [
    ["/features/resident-app", t.nav.features],
    ["/for/property-managers", t.nav.managers],
    ["/pricing", t.nav.pricing],
    ["/features/smart-building", t.nav.smartBuilding],
    ["#compliance", t.nav.compliance],
    ["#contact", t.nav.contact],
    ["/guide", t.nav.guides],
  ];

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "rgba(250,246,238,0.82)", backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)",
      borderBottom: "1px solid var(--hairline)",
    }}>
      <Container style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 68 }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <img src="/assets/cortile-house.png" alt="Cortile 寓家 app icon" style={{ height: 34, width: 34, borderRadius: 9, boxShadow: "var(--shadow-1)" }} />
          <img src="/assets/cortile-wordmark.svg" alt="Cortile 寓家" style={{ height: 30 }} />
        </a>
        <nav style={{ display: "flex", alignItems: "center", gap: 28 }} className="nav-links">
          {navItems.map(([href, label]) => <a key={href} href={href} style={navLink}>{label}</a>)}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <div style={{ display: "flex", background: "var(--bg-field)", borderRadius: 999, padding: 3 }}>
            {[["zh", "中"], ["en", "EN"]].map(([k, lbl]) => (
              <button key={k} onClick={() => setLang(k)} aria-pressed={lang === k} style={{
                border: 0, cursor: "pointer", borderRadius: 999, padding: "5px 12px",
                fontFamily: SANS, fontWeight: 700, fontSize: 12,
                color: lang === k ? "#fff" : "var(--neutral-600)",
                background: lang === k ? "var(--primary-500)" : "transparent",
              }}>{lbl}</button>
            ))}
          </div>
          <button
            type="button"
            className="mobile-menu-button"
            onClick={() => setMenuOpen((open) => !open)}
            aria-expanded={menuOpen}
            aria-label={lang === "zh" ? "開啟選單" : "Open menu"}
            style={{
              border: "1px solid var(--hairline)", cursor: "pointer", borderRadius: 999,
              width: 38, height: 38, alignItems: "center", justifyContent: "center",
              background: "var(--bg-surface)", color: "var(--neutral-800)"
            }}
          >
            <LIcon name={menuOpen ? "x" : "menu"} size={20} />
          </button>
          <a
            href={MANAGER_LOGIN_URL}
            target="_blank"
            rel="noopener"
            title={t.nav.managerLoginHint}
            style={managerLoginLink}
            className="nav-links"
          >
            {t.nav.managerLogin}
          </a>
          <a href="#contact" style={{ textDecoration: "none" }} className="nav-cta">
            <Button variant="primary" size="sm">{t.nav.cta}</Button>
          </a>
        </div>
        {menuOpen && (
          <nav className="mobile-menu" aria-label={lang === "zh" ? "手機導航" : "Mobile navigation"}>
            {navItems.map(([href, label]) => <a key={href} href={href} onClick={closeMenu}>{label}</a>)}
            <a href={MANAGER_LOGIN_URL} target="_blank" rel="noopener" onClick={closeMenu}>
              {t.nav.managerLogin}
              <span style={{ display: "block", marginTop: 2, fontSize: 11, fontWeight: 500, color: "var(--neutral-500)" }}>{t.nav.managerLoginHint}</span>
            </a>
            <a href="#contact" onClick={closeMenu}>{t.nav.cta}</a>
          </nav>
        )}
      </Container>
    </header>
  );
}
const navLink = { fontFamily: SANS, fontWeight: 500, fontSize: 14, color: "var(--neutral-700)", textDecoration: "none" };
const managerLoginLink = {
  fontFamily: SANS,
  fontWeight: 700,
  fontSize: 13,
  color: "var(--primary-600)",
  textDecoration: "none",
  padding: "8px 12px",
  borderRadius: 999,
  boxShadow: "inset 0 0 0 1px var(--hairline)",
  background: "rgba(255,255,255,0.42)",
};

// ─────────────────────────── Hero ───────────────────────────
function Hero({ t }) {
  return (
    <section id="top" style={{ position: "relative", overflow: "hidden" }}>
      {/* soft warm radial wash, restrained */}
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(120% 90% at 88% 0%, rgba(201,97,46,0.08), rgba(250,246,238,0) 60%)", pointerEvents: "none" }} />
      <Container style={{ position: "relative", display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 48, alignItems: "center", padding: "72px 24px 80px" }} >
        <div className="hero-copy" style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <Eyebrow color="var(--primary-600)">{t.hero.eyebrow}</Eyebrow>
          <h1 style={{ margin: 0, fontFamily: SERIF, fontWeight: 900, fontSize: 56, lineHeight: 1.16, letterSpacing: "0.01em", color: "var(--neutral-900)" }}>
            {t.hero.title[0]}<br />{t.hero.title[1]}
          </h1>
          <p style={{ margin: 0, maxWidth: 480, fontFamily: SANS, fontSize: 17, lineHeight: 1.7, color: "var(--neutral-600)", textWrap: "pretty" }}>{t.hero.sub}</p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 4 }}>
            <a href="#contact" style={{ textDecoration: "none" }}><Button variant="primary" size="lg" iconRight={<LIcon name="arrow-right" size={18} />}>{t.hero.ctaPrimary}</Button></a>
            <a href="#features" style={{ textDecoration: "none" }}><Button variant="outline" size="lg">{t.hero.ctaSecondary}</Button></a>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 4, fontFamily: SANS, fontSize: 13, color: "var(--neutral-500)" }}>
            <LIcon name="check-circle-2" size={15} color="var(--success-500)" />{t.hero.note}
          </div>
        </div>
        <div className="hero-art" style={{ display: "flex", justifyContent: "center" }}>
          <PhoneMockup t={t} />
        </div>
      </Container>
    </section>
  );
}

// ─────────────────── Phone mockup (real app home) ───────────────────
function PhoneMockup() {
  const action = (ic, lb, badge) => (
    <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 10, background: "#fff", borderRadius: 14, boxShadow: "var(--shadow-2)", padding: "13px 14px" }}>
      <IconTile icon={ic} size={36} />
      <span style={{ fontFamily: SANS, fontWeight: 700, fontSize: 14, color: "var(--neutral-900)" }}>{lb}</span>
      {badge && (
        <span style={{ position: "absolute", top: 10, right: 12, minWidth: 20, height: 20, padding: "0 5px", borderRadius: 999, background: "var(--primary-500)", color: "#fff", fontFamily: SANS, fontWeight: 700, fontSize: 11, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>{badge}</span>
      )}
    </div>
  );
  const metric = (v, lb) => (
    <div style={{ flex: 1, background: "#fff", borderRadius: 14, boxShadow: "var(--shadow-2)", padding: "13px 15px" }}>
      <div style={{ fontFamily: "var(--font-numeric)", fontWeight: 700, fontSize: 19, color: "var(--neutral-900)", fontVariantNumeric: "tabular-nums" }}>{v}</div>
      <div style={{ fontFamily: SANS, fontSize: 12, color: "var(--neutral-600)", marginTop: 3 }}>{lb}</div>
    </div>
  );
  return (
    <div style={{
      width: 308, borderRadius: 46, background: "#0E0C0A", padding: 11,
      boxShadow: "var(--shadow-hero)", position: "relative",
    }}>
      <div style={{ borderRadius: 36, background: "var(--bg-app)", overflow: "hidden", height: 638, position: "relative" }}>
        {/* status bar */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "15px 26px 4px", fontFamily: SANS, fontWeight: 700, fontSize: 14, color: "var(--neutral-900)" }}>
          <span>9:41</span>
          <span style={{ display: "flex", gap: 6, alignItems: "center" }}><LIcon name="signal" size={15} /><LIcon name="wifi" size={15} /><LIcon name="battery-full" size={18} /></span>
        </div>
        {/* dynamic island */}
        <div style={{ position: "absolute", top: 13, left: "50%", transform: "translateX(-50%)", width: 86, height: 24, borderRadius: 999, background: "#0E0C0A" }} />
        {/* nav title */}
        <div style={{ textAlign: "center", fontFamily: SANS, fontWeight: 700, fontSize: 16, color: "var(--neutral-900)", padding: "8px 0 4px" }}>寓家</div>

        <div style={{ padding: "4px 16px 18px", display: "flex", flexDirection: "column", gap: 14 }}>
          <div>
            <div style={{ fontFamily: SERIF, fontWeight: 900, fontSize: 25, color: "var(--neutral-900)" }}>早安，林小姐</div>
            <div style={{ display: "flex", alignItems: "center", gap: 5, fontFamily: SANS, fontSize: 13, color: "var(--neutral-600)", marginTop: 4 }}>
              <LIcon name="building" size={13} color="var(--neutral-500)" />嘉庭軒 · A 座 18 樓 1802 室
            </div>
          </div>
          {/* resident metallic card */}
          <div style={{ borderRadius: 16, background: "var(--grad-metallic)", boxShadow: "var(--shadow-hero)", padding: 18, color: "#fff", display: "flex", flexDirection: "column", gap: 16 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div>
                <div style={{ fontFamily: SANS, fontWeight: 700, fontSize: 9, letterSpacing: "0.16em", color: "rgba(228,223,212,0.82)" }}>CORTILE</div>
                <div style={{ fontFamily: SERIF, fontWeight: 900, fontSize: 24, marginTop: 7 }}>林小姐</div>
                <div style={{ fontFamily: SANS, fontSize: 12, color: "rgba(228,223,212,0.78)", marginTop: 3 }}>業主 · A 座 18 樓 1802 室</div>
              </div>
              <LIcon name="badge-check" size={24} color="var(--silver-light)" />
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
              <div>
                <div style={{ fontFamily: SANS, fontSize: 11, color: "rgba(228,223,212,0.66)" }}>門禁憑證</div>
                <div style={{ fontFamily: SANS, fontWeight: 700, fontSize: 15, marginTop: 3 }}>有效</div>
              </div>
              <span style={{ background: "var(--silver-light)", color: "var(--neutral-900)", borderRadius: 999, padding: "8px 18px", fontFamily: SANS, fontWeight: 700, fontSize: 13 }}>開啟</span>
            </div>
          </div>
          {/* 2×2 quick actions with count badges */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            {action("credit-card", "繳費", "2")}
            {action("wrench", "報修")}
            {action("user-plus", "訪客", "1")}
            {action("waves", "設施")}
          </div>
          {/* 住戶摘要 */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <span style={{ fontFamily: SANS, fontWeight: 700, fontSize: 15, color: "var(--neutral-900)" }}>住戶摘要</span>
            <span style={{ fontFamily: SANS, fontWeight: 700, fontSize: 13, color: "var(--primary-500)" }}>服務</span>
          </div>
          <div style={{ display: "flex", gap: 12 }}>
            {metric("HK$8,880", "待繳金額")}
            {metric("1", "待取包裹")}
          </div>
        </div>
        {/* tab bar with centered QR */}
        <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 72, background: "#fff", borderTop: "1px solid var(--hairline)" }}>
          <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", padding: "12px 30px 0" }}>
            <LIcon name="home" size={23} color="var(--primary-500)" />
            <LIcon name="credit-card" size={23} color="var(--neutral-400)" />
            <span style={{ width: 23 }} />
            <LIcon name="calendar-days" size={23} color="var(--neutral-400)" />
            <LIcon name="user-round" size={23} color="var(--neutral-400)" />
          </div>
          <div style={{ position: "absolute", top: -22, left: "50%", transform: "translateX(-50%)", width: 56, height: 56, borderRadius: 999, background: "var(--primary-500)", boxShadow: "var(--shadow-brand)", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <LIcon name="qr-code" size={26} color="#fff" stroke={2} />
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────── Value 3-col ───────────────────────────
function ValueThree({ t }) {
  return (
    <section style={{ padding: "88px 0" }}>
      <Container>
        <SectionHead eyebrow={t.value.eyebrow} title={t.value.title} />
        <div className="grid-3-resp" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24, marginTop: 48 }}>
          {t.value.items.map((it) => (
            <div key={it.title} style={{ display: "flex", flexDirection: "column", gap: 14, padding: "4px 4px" }}>
              <div style={{ width: 56, height: 56, borderRadius: 16, background: "var(--primary-50)", color: "var(--primary-500)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <LIcon name={it.icon} size={26} stroke={1.75} />
              </div>
              <h3 style={{ margin: 0, fontFamily: SANS, fontWeight: 700, fontSize: 19, color: "var(--neutral-900)" }}>{it.title}</h3>
              <p style={{ margin: 0, fontFamily: SANS, fontSize: 15, lineHeight: 1.65, color: "var(--neutral-600)", textWrap: "pretty" }}>{it.body}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────── Feature grid ───────────────────────────
function FeatureGrid({ t }) {
  return (
    <section id="features" style={{ padding: "88px 0", background: "var(--bg-surface)" }}>
      <Container>
        <SectionHead eyebrow={t.features.eyebrow} title={t.features.title} sub={t.features.sub} />
        <div className="grid-feat" style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 18, marginTop: 48 }}>
          {t.features.items.map((it) => (
            <FeatureCard key={it.title} icon={it.icon} title={it.title} description={it.body} tint={it.icon === "siren" ? "error" : "primary"} />
          ))}
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { LIcon, Container, Eyebrow, SectionHead, Nav, Hero, PhoneMockup, ValueThree, FeatureGrid });