// 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)";

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 }) {
  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">
          <a href="#features" style={navLink}>{t.nav.features}</a>
          <a href="#managers" style={navLink}>{t.nav.managers}</a>
          <a href="#pricing" style={navLink}>{t.nav.pricing}</a>
          <a href="#compliance" style={navLink}>{t.nav.compliance}</a>
          <a href="#contact" style={navLink}>{t.nav.contact}</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>
          <a href="#contact" style={{ textDecoration: "none" }} className="nav-cta">
            <Button variant="primary" size="sm">{t.nav.cta}</Button>
          </a>
        </div>
      </Container>
    </header>
  );
}
const navLink = { fontFamily: SANS, fontWeight: 500, fontSize: 14, color: "var(--neutral-700)", textDecoration: "none" };

// ─────────────────────────── 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 });