// ---------- Marketing shell — shared nav + footer + reusable bits ----------

const MarketingNav = ({ active, onNav, onEnterApp }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const items = [
    { id: "product",  label: "Product" },
    { id: "workflow", label: "Workflow" },
    { id: "studios",  label: "Studios" },
    { id: "pricing",  label: "Pricing" },
    { id: "journal",  label: "Journal" },
  ];
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 30,
      background: scrolled ? "rgba(250,248,244,0.88)" : "rgba(250,248,244,0)",
      backdropFilter: scrolled ? "blur(16px)" : "none",
      borderBottom: scrolled ? "1px solid rgba(8,12,16,0.06)" : "1px solid transparent",
      transition: "all 240ms ease",
    }}>
      <div className="container hd-marketing-nav-row" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 76,
      }}>
        <button
          onClick={() => onNav("landing")}
          style={{ background: "transparent", border: "none", padding: 0, cursor: "pointer" }}
        >
          <HDLockup light markSize={28} />
        </button>
        <nav className="hd-marketing-nav-links" style={{ display: "flex", gap: 28 }}>
          {items.map(item => (
            <button key={item.id} onClick={() => onNav(item.id)} style={{
              background: "transparent", border: "none", padding: 0, cursor: "pointer",
              fontFamily: "var(--sans)", fontSize: 13, fontWeight: 400,
              color: active === item.id ? "var(--ink)" : "rgba(8,12,16,0.55)",
              position: "relative",
              transition: "color 120ms ease",
            }}
              onMouseEnter={(e) => (e.currentTarget.style.color = "var(--ink)")}
              onMouseLeave={(e) => (e.currentTarget.style.color = active === item.id ? "var(--ink)" : "rgba(8,12,16,0.55)")}
            >
              {item.label}
              {active === item.id && (
                <span style={{
                  position: "absolute", left: 0, right: 0, bottom: -22,
                  height: 1, background: "var(--ink)",
                }} />
              )}
            </button>
          ))}
        </nav>
        <div className="hd-marketing-nav-actions" style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <button className="hd-marketing-nav-action-secondary" onClick={onEnterApp} style={{
            background: "transparent", border: "none", padding: "8px 12px",
            fontSize: 13, color: "var(--ink)", cursor: "pointer", fontFamily: "var(--sans)",
          }}>Sign in</button>
          <button className="hd-marketing-nav-action-secondary" onClick={() => window.dispatchEvent(new CustomEvent("hd-navigate", { detail: "signup" }))} style={{
            background: "transparent", border: "1px solid rgba(8,12,16,0.16)", padding: "8px 14px",
            fontSize: 13, color: "var(--ink)", cursor: "pointer", fontFamily: "var(--sans)",
            borderRadius: 8, fontWeight: 500,
          }}>Start free</button>
          <Button variant="secondary" light size="md" onClick={onEnterApp}>
            Open portal
          </Button>
        </div>
      </div>
    </header>
  );
};

const MarketingFooter = ({ onNav }) => (
  <footer style={{ borderTop: "1px solid rgba(8,12,16,0.08)", padding: "56px 0 32px", background: "var(--paper)" }}>
    <div className="container md-stack" style={{ display: "grid", gridTemplateColumns: "1.5fr repeat(4, 1fr)", gap: 40 }}>
      <div>
        <HDLockup light markSize={28} />
        <p style={{ fontSize: 12.5, color: "rgba(8,12,16,0.55)", lineHeight: 1.6, marginTop: 20, maxWidth: 260 }}>
          Premium client portals for the studios telling the stories worth telling.
        </p>
      </div>
      {[
        { t: "Product", l: [
          ["Overview", "product"], ["Workflow", "workflow"], ["Pricing", "pricing"], ["Changelog", null], ["Roadmap", null]
        ]},
        { t: "Studios", l: [
          ["Case studies", "studios"], ["Atelier program", null], ["Founding studios", null], ["Partner with us", null]
        ]},
        { t: "Resources", l: [
          ["Journal", "journal"], ["Documentation", null], ["Templates", null], ["Press kit", null]
        ]},
        { t: "Company", l: [
          ["About", null], ["Careers", null], ["Security", null], ["Contact", null]
        ]},
      ].map(col => (
        <div key={col.t}>
          <div className="micro" style={{ color: "rgba(8,12,16,0.55)", marginBottom: 14 }}>{col.t}</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {col.l.map(([item, route]) => (
              <button
                key={item}
                onClick={() => route && onNav(route)}
                style={{
                  background: "transparent", border: "none", padding: 0,
                  fontSize: 13, color: "rgba(8,12,16,0.75)", textAlign: "left",
                  fontFamily: "var(--sans)", cursor: route ? "pointer" : "default",
                  transition: "color 120ms ease",
                }}
                onMouseEnter={(e) => (e.currentTarget.style.color = "var(--ink)")}
                onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(8,12,16,0.75)")}
              >{item}</button>
            ))}
          </div>
        </div>
      ))}
    </div>
    <div className="container hd-marketing-footer-bottom" style={{ marginTop: 48, paddingTop: 24, borderTop: "1px solid rgba(8,12,16,0.06)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <div style={{ fontSize: 12, color: "rgba(8,12,16,0.45)" }}>© 2026 HarborDock Studio Inc. · Built for creative teams.</div>
      <div style={{ display: "flex", gap: 20, fontSize: 12 }}>
        <a href="#" style={{ color: "rgba(8,12,16,0.55)" }}>Privacy</a>
        <a href="#" style={{ color: "rgba(8,12,16,0.55)" }}>Terms</a>
        <a href="#" style={{ color: "rgba(8,12,16,0.55)" }}>DPA</a>
      </div>
    </div>
  </footer>
);

// Shared marketing page header (eyebrow + display headline + lead)
const PageMasthead = ({ eyebrow, title, italic, lead, kicker, side }) => (
  <section style={{ padding: "100px 0 60px", borderBottom: "1px solid rgba(8,12,16,0.06)", position: "relative", overflow: "hidden" }}>
    <div style={{
      position: "absolute", right: "-180px", top: "-120px",
      width: 480, height: 480, opacity: 0.025, pointerEvents: "none",
    }}>
      <img src="assets/harbordock-mark.png" alt="" style={{ width: "100%", height: "100%", objectFit: "contain" }} />
    </div>
    <div className="container" style={{ position: "relative" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 24 }}>
        <span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--harbor)" }} className="hd-pulse" />
        <span className="micro" style={{ color: "rgba(8,12,16,0.55)" }}>{eyebrow}</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: side ? "1.3fr 1fr" : "1fr", gap: 60, alignItems: "end" }}>
        <div>
          <h1 style={{
            margin: 0, fontFamily: "var(--serif)",
            fontSize: "clamp(56px, 7vw, 88px)", lineHeight: 1.02,
            fontWeight: 500, letterSpacing: "-0.03em",
            color: "var(--ink)", maxWidth: 900,
          }}>
            {title}
            {italic && <><br /><span style={{ fontStyle: "italic", color: "rgba(8,12,16,0.55)" }}>{italic}</span></>}
          </h1>
          {lead && (
            <p style={{
              fontSize: 18, lineHeight: 1.55, color: "rgba(8,12,16,0.72)",
              maxWidth: 560, margin: "28px 0 0",
            }}>{lead}</p>
          )}
          {kicker && (
            <div style={{ marginTop: 28, display: "flex", gap: 12 }}>{kicker}</div>
          )}
        </div>
        {side}
      </div>
    </div>
  </section>
);

// Display H2 used across marketing pages
const DisplayH2 = ({ children, italic, eyebrow, lead, center = false, color }) => (
  <div style={{ maxWidth: center ? 800 : 720, marginLeft: center ? "auto" : 0, marginRight: center ? "auto" : 0, textAlign: center ? "center" : "left", marginBottom: 32 }}>
    {eyebrow && <div className="micro" style={{ color: color || "rgba(8,12,16,0.45)", marginBottom: 12 }}>{eyebrow}</div>}
    <h2 style={{
      fontFamily: "var(--serif)", fontSize: 44, lineHeight: 1.05,
      margin: 0, letterSpacing: "-0.02em", fontWeight: 500, color: color ? color : "var(--ink)",
    }}>
      {children}
      {italic && <><br /><span style={{ fontStyle: "italic", color: color ? color : "rgba(8,12,16,0.55)" }}>{italic}</span></>}
    </h2>
    {lead && (
      <p style={{
        fontSize: 16.5, lineHeight: 1.6, color: "rgba(8,12,16,0.65)",
        maxWidth: 560, marginTop: 18, marginBottom: 0,
        marginLeft: center ? "auto" : 0, marginRight: center ? "auto" : 0,
      }}>{lead}</p>
    )}
  </div>
);

// Light shared "Begin" CTA at end of any marketing page
const MarketingCTA = ({ onEnterApp, title = "Open the demo portal.", italic = "See it move." }) => (
  <section style={{ padding: "120px 0", position: "relative", overflow: "hidden", borderTop: "1px solid rgba(8,12,16,0.06)" }}>
    <div style={{
      position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)",
      width: 560, height: 560, opacity: 0.03, pointerEvents: "none",
    }}>
      <img src="assets/harbordock-mark.png" alt="" style={{ width: "100%", height: "100%", objectFit: "contain" }} />
    </div>
    <div className="container" style={{ textAlign: "center", position: "relative" }}>
      <Reveal>
        <h2 style={{
          fontFamily: "var(--serif)", fontSize: "clamp(56px, 7vw, 80px)", lineHeight: 1.02,
          margin: 0, letterSpacing: "-0.03em", fontWeight: 500,
        }}>
          {title}<br />
          <span style={{ fontStyle: "italic", color: "rgba(8,12,16,0.55)" }}>{italic}</span>
        </h2>
        <div style={{ display: "inline-flex", gap: 12, marginTop: 32 }}>
          <Button variant="secondary" light size="lg" onClick={onEnterApp} iconRight={<window.Icon.Arrow size={15} />}>
            Open the portal
          </Button>
          <Button variant="ghost" light size="lg">
            Talk to the team
          </Button>
        </div>
      </Reveal>
    </div>
  </section>
);

// Light card shell
const LCard = ({ children, style = {}, hover = false, onClick }) => (
  <div
    onClick={onClick}
    style={{
      background: "var(--white)",
      border: "1px solid rgba(8,12,16,0.08)",
      borderRadius: 14,
      transition: "transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease",
      cursor: onClick ? "pointer" : "default",
      ...style,
    }}
    onMouseEnter={hover ? (e) => {
      e.currentTarget.style.borderColor = "rgba(8,12,16,0.18)";
      e.currentTarget.style.transform = "translateY(-3px)";
      e.currentTarget.style.boxShadow = "0 20px 40px -28px rgba(8,12,16,0.20)";
    } : undefined}
    onMouseLeave={hover ? (e) => {
      e.currentTarget.style.borderColor = "rgba(8,12,16,0.08)";
      e.currentTarget.style.transform = "translateY(0)";
      e.currentTarget.style.boxShadow = "none";
    } : undefined}
  >
    {children}
  </div>
);

// Mock dark UI block — used inside marketing pages as inline product previews
const UIPreview = ({ children, title, sub, label, dense = false }) => (
  <div style={{
    background: "var(--ink)", color: "var(--white)",
    borderRadius: 14, padding: dense ? 16 : 20,
    boxShadow: "0 30px 60px -30px rgba(8,12,16,0.40), 0 0 0 1px rgba(8,12,16,0.06)",
    overflow: "hidden",
    fontFamily: "var(--sans)",
  }}>
    {(title || label) && (
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
        {title && (
          <div>
            <div className="micro" style={{ color: "var(--warm-gray)", fontSize: 9 }}>{label}</div>
            <div style={{ fontSize: 13, fontWeight: 500, marginTop: 2 }}>{title}</div>
            {sub && <div style={{ fontSize: 11, color: "var(--warm-gray)", marginTop: 2 }}>{sub}</div>}
          </div>
        )}
        <div style={{ display: "flex", gap: 6 }}>
          <span style={{ width: 5, height: 5, borderRadius: 99, background: "rgba(255,255,255,0.16)" }} />
          <span style={{ width: 5, height: 5, borderRadius: 99, background: "rgba(255,255,255,0.16)" }} />
          <span style={{ width: 5, height: 5, borderRadius: 99, background: "rgba(255,255,255,0.16)" }} />
        </div>
      </div>
    )}
    {children}
  </div>
);

window.MarketingNav = MarketingNav;
window.MarketingFooter = MarketingFooter;
window.PageMasthead = PageMasthead;
window.DisplayH2 = DisplayH2;
window.MarketingCTA = MarketingCTA;
window.LCard = LCard;
window.UIPreview = UIPreview;