// Screen 1 — Marketing landing page
const Marketing = ({ onGoTo }) => {
  const tile = (grad) => ({
    aspectRatio: "4 / 5", borderRadius: 4, position: "relative", overflow: "hidden",
    background: grad,
  });
  const seal = (
    <span style={{
      position: "absolute", bottom: 10, left: 10, width: 18, height: 18, borderRadius: 999,
      background: "var(--lk-terracotta)", display: "inline-flex", alignItems: "center", justifyContent: "center",
    }}>
      <svg viewBox="0 0 20 20" width="9" height="9" fill="none">
        <path d="M6 4 V16 H14" stroke="#fff" strokeWidth="2.4" strokeLinecap="square"/>
      </svg>
    </span>
  );
  const lic = (txt) => (
    <span style={{
      position: "absolute", bottom: 12, right: 12,
      font: "500 9px/1 var(--font-mono)", color: "rgba(255,255,255,0.85)",
      letterSpacing: "0.04em", textShadow: "0 1px 2px rgba(0,0,0,0.4)",
    }}>{txt}</span>
  );

  return (
    <div style={{ background: "#fff", color: "var(--lk-navy)" }}>
      {/* Top nav */}
      <header style={{
        height: 64, borderBottom: "1px solid var(--lk-border)",
        position: "sticky", top: 0, background: "rgba(255,255,255,0.96)", backdropFilter: "blur(8px)", zIndex: 5,
      }}>
        <div style={{ maxWidth: 1140, margin: "0 auto", padding: "0 32px", height: "100%", display: "flex", alignItems: "center", gap: 32 }}>
          <Logo />
          <nav style={{ display: "flex", gap: 24, marginLeft: 16 }}>
            {["How it works", "Consent", "For creators", "Pricing"].map(t => (
              <a key={t} href="#" style={{ font: "500 13px/1 var(--font-sans)", color: "var(--lk-navy)", textDecoration: "none" }}>{t}</a>
            ))}
          </nav>
          <div style={{ flex: 1 }} />
          <a href="#" style={{ font: "500 13px/1 var(--font-sans)", color: "var(--lk-muted)", textDecoration: "none" }}>Sign in</a>
          <button onClick={() => onGoTo("onboarding")} style={{
            all: "unset", cursor: "pointer", height: 36, padding: "0 14px", borderRadius: 4,
            background: "var(--lk-navy)", color: "#fff", font: "500 14px/1 var(--font-sans)",
          }}>Apply for invite</button>
        </div>
      </header>

      {/* Hero */}
      <section style={{ padding: "96px 0 64px", background: "linear-gradient(180deg, #FAF7F3 0%, #fff 100%)" }}>
        <div style={{ maxWidth: 1140, margin: "0 auto", padding: "0 32px" }}>
          <span className="lk-eyebrow" style={{ color: "var(--lk-terracotta)" }}>Consent-first creator platform · Pre-seed · Invite-only</span>
          <h1 style={{
            font: "600 72px/1.05 var(--font-sans)", letterSpacing: "-0.025em",
            margin: "16px 0 24px", maxWidth: 920,
          }}>Creator-owned AI likeness,<br/>built consent-first.</h1>
          <p style={{ font: "400 19px/1.55 var(--font-sans)", color: "#3a4159", maxWidth: 660, margin: 0 }}>
            License an AI version of yourself. Set the rules. Approve every output. Revoke any time.
            Models never leave the platform.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 36 }}>
            <button onClick={() => onGoTo("onboarding")} style={{
              all: "unset", cursor: "pointer", height: 48, padding: "0 22px", borderRadius: 4,
              background: "var(--lk-terracotta)", color: "#fff", font: "500 15px/1 var(--font-sans)",
              display: "inline-flex", alignItems: "center", gap: 8,
            }}>Apply for invite <i data-lucide="arrow-right" style={{ width: 14, height: 14 }}></i></button>
            <button onClick={() => {
              const el = document.getElementById("how-it-works");
              if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" });
            }} style={{
              all: "unset", cursor: "pointer", height: 48, padding: "0 22px", borderRadius: 4,
              background: "#fff", color: "var(--lk-navy)", font: "500 15px/1 var(--font-sans)",
              border: "1px solid var(--lk-border)",
            }}>How it works</button>
          </div>

          {/* Tile row showing license states */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginTop: 80 }}>
            <div style={tile("linear-gradient(135deg,#3a2820 0%,#7a4d33 100%)")}>{seal}{lic("LIC-2025-04821 · @marawest · revocable")}</div>
            <div style={{ ...tile("linear-gradient(135deg,#2a3445 0%,#5e7390 100%)"), }}>
              <div style={{
                position: "absolute", inset: 0, background: "rgba(26,31,54,0.6)",
                backdropFilter: "blur(24px) saturate(0.8)", WebkitBackdropFilter: "blur(24px) saturate(0.8)",
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                <Chip variant="pending">Pending review</Chip>
              </div>
            </div>
            <div style={tile("linear-gradient(135deg,#3d2d2d 0%,#8a5e58 100%)")}>{seal}{lic("LIC-2025-04795 · @marawest · revocable")}</div>
            <div style={{ ...tile("linear-gradient(135deg,#241f2e 0%,#3a2f4a 100%)") }}>
              <div style={{
                position: "absolute", inset: 0, background: "rgba(26,31,54,0.6)",
                backdropFilter: "blur(24px) saturate(0.8)", WebkitBackdropFilter: "blur(24px) saturate(0.8)",
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                <Chip variant="revoked">Revoked</Chip>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Three principles */}
      <section style={{ padding: "96px 0", borderTop: "1px solid var(--lk-border)" }}>
        <div style={{ maxWidth: 1140, margin: "0 auto", padding: "0 32px" }}>
          <span className="lk-eyebrow" style={{ color: "var(--lk-terracotta)" }}>Three principles</span>
          <h2 style={{ font: "600 40px/1.15 var(--font-sans)", letterSpacing: "-0.02em", margin: "16px 0 56px", maxWidth: 720 }}>
            The platform is structured around three facts.
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
            {[
              { num: "01", title: "You own the model.", body: "Your model is trained on photos you upload, with your written consent. It stays on Likeness infrastructure. We do not export weights, sell access, or use it to train anything else." },
              { num: "02", title: "You set the rules.", body: "You define every category, tier, and permission. Subscribers see the rules verbatim before they generate. The model enforces them at generation time." },
              { num: "03", title: "You can revoke anything.", body: "Any license, any time. The image is removed from the subscriber's library within 60 seconds. We pursue takedowns of revoked content found off-platform." },
            ].map(p => (
              <div key={p.num} style={{ display: "flex", flexDirection: "column", gap: 14, paddingTop: 24, borderTop: "1px solid var(--lk-navy)" }}>
                <span style={{ font: "600 12px/1 var(--font-mono)", color: "var(--lk-terracotta)", letterSpacing: "0.06em" }}>{p.num}</span>
                <h3 style={{ font: "600 22px/1.25 var(--font-sans)", letterSpacing: "-0.01em", margin: 0 }}>{p.title}</h3>
                <p style={{ font: "400 15px/1.6 var(--font-sans)", color: "var(--lk-muted)", margin: 0 }}>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How it works */}
      <section id="how-it-works" style={{ padding: "96px 0", borderTop: "1px solid var(--lk-border)", background: "var(--lk-tint)" }}>
        <div style={{ maxWidth: 1140, margin: "0 auto", padding: "0 32px" }}>
          <span className="lk-eyebrow" style={{ color: "var(--lk-terracotta)" }}>How it works</span>
          <h2 style={{ font: "600 40px/1.15 var(--font-sans)", letterSpacing: "-0.02em", margin: "16px 0 12px", maxWidth: 720 }}>
            Verify. Train. Set rules. Approve.
          </h2>
          <p style={{ font: "400 17px/1.6 var(--font-sans)", color: "var(--lk-muted)", margin: 0, maxWidth: 620 }}>
            Four steps from invite to first license. Most creators are live within ten days.
          </p>

          <div style={{ position: "relative", marginTop: 64 }}>
            <div style={{ position: "absolute", top: 17, left: "8.33%", right: "8.33%", height: 1, background: "var(--lk-border)", zIndex: 0 }}></div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, position: "relative", zIndex: 1 }}>
              {[
                { num: "01", title: "Verify", body: "Government ID, liveness check, phone. Required by law for adult platforms; also how we keep the platform real-people-only." },
                { num: "02", title: "Train", body: "Upload your reference photos. We train a private model on your encrypted set." },
                { num: "03", title: "Set rules", body: "Decide what subscribers can request. Categories, explicitness ceiling, blocked terms, distribution. Your license is the contract." },
                { num: "04", title: "Approve", body: "Submissions land in your queue. Approve for private download, approve for the gallery, or reject. The compliance check runs first." },
              ].map(s => (
                <div key={s.num} style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" }}>
                  <span style={{
                    width: 36, height: 36, borderRadius: 999, background: "#fff",
                    border: "1px solid var(--lk-border)", display: "inline-flex", alignItems: "center", justifyContent: "center",
                    font: "600 13px/1 var(--font-mono)", color: "var(--lk-terracotta)", letterSpacing: "0.04em",
                  }}>{s.num}</span>
                  <h3 style={{ font: "600 19px/1.3 var(--font-sans)", margin: 0 }}>{s.title}</h3>
                  <p style={{ font: "400 14px/1.6 var(--font-sans)", color: "var(--lk-muted)", margin: 0 }}>{s.body}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* What you control — license preview */}
      <section style={{ padding: "96px 0", borderTop: "1px solid var(--lk-border)" }}>
        <div style={{ maxWidth: 1140, margin: "0 auto", padding: "0 32px", display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "center" }}>
          <div>
            <span className="lk-eyebrow" style={{ color: "var(--lk-terracotta)" }}>What you control</span>
            <h2 style={{ font: "600 40px/1.15 var(--font-sans)", letterSpacing: "-0.02em", margin: "16px 0 20px", maxWidth: 480 }}>
              Every category. Every tier. Every permission.
            </h2>
            <p style={{ font: "400 17px/1.65 var(--font-sans)", color: "var(--lk-muted)", margin: 0, maxWidth: 480 }}>
              The license is the spine of the platform. It's where you decide what your model will and will not produce, who can see what, and on what terms. Edit it any time. Changes apply to new submissions only.
            </p>
            <button onClick={() => onGoTo("license")} style={{
              all: "unset", cursor: "pointer", marginTop: 28,
              font: "500 14px/1 var(--font-sans)", color: "var(--lk-terracotta)",
              display: "inline-flex", alignItems: "center", gap: 6,
            }}>See the full license editor <i data-lucide="arrow-right" style={{ width: 14, height: 14 }}></i></button>
          </div>

          {/* Stylized license preview */}
          <div style={{
            border: "1px solid var(--lk-border)", borderRadius: 6, background: "#fff",
            boxShadow: "var(--shadow-card)", overflow: "hidden",
          }}>
            <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--lk-border)", display: "flex", alignItems: "center", gap: 10, background: "var(--lk-tint)" }}>
              <i data-lucide="file-check-2" style={{ width: 14, height: 14, color: "var(--lk-navy)" }}></i>
              <span style={{ font: "600 13px/1 var(--font-sans)" }}>License · @marawest</span>
              <span style={{ flex: 1 }}></span>
              <Chip variant="approved">Active</Chip>
            </div>
            <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 18 }}>
              <div>
                <span className="lk-eyebrow">Allowed</span>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 8 }}>
                  {["Solo content", "Partnered (verified)", "Custom prompts"].map(t =>
                    <span key={t} style={{
                      font: "500 12px/1 var(--font-sans)", color: "var(--lk-navy)",
                      background: "var(--lk-tint)", padding: "6px 10px", borderRadius: 2,
                    }}>{t}</span>
                  )}
                </div>
              </div>
              <div>
                <span className="lk-eyebrow">Explicitness ceiling</span>
                <div style={{ marginTop: 8, display: "flex", border: "1px solid var(--lk-border)", borderRadius: 4, overflow: "hidden", width: "fit-content" }}>
                  {["Suggestive", "Topless", "Full nudity"].map((t, i) =>
                    <span key={t} style={{
                      font: "500 12px/1 var(--font-sans)",
                      padding: "8px 12px",
                      background: i === 1 ? "var(--lk-navy)" : "#fff",
                      color: i === 1 ? "#fff" : "var(--lk-navy)",
                      borderLeft: i ? "1px solid var(--lk-border)" : "none",
                    }}>{t}</span>
                  )}
                </div>
              </div>
              <div>
                <span className="lk-eyebrow">Blocked by you</span>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 8 }}>
                  {["School settings", "Specific clothing brands", "Family roleplay"].map(t =>
                    <span key={t} style={{
                      font: "500 12px/1 var(--font-sans)", color: "var(--lk-error)",
                      background: "var(--lk-error-bg)", padding: "6px 10px", borderRadius: 2,
                      display: "inline-flex", alignItems: "center", gap: 6,
                    }}>{t} <i data-lucide="x" style={{ width: 11, height: 11 }}></i></span>
                  )}
                </div>
              </div>
              <div style={{ borderTop: "1px solid var(--lk-border)", paddingTop: 14, display: "flex", justifyContent: "space-between" }}>
                <span className="lk-small" style={{ fontSize: 12 }}>Last edited 3 days ago</span>
                <span style={{ font: "500 12px/1 var(--font-mono)", color: "var(--lk-muted)" }}>v18 · LIC-2025</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* What we don't do */}
      <section style={{ padding: "96px 0", borderTop: "1px solid var(--lk-border)", background: "var(--lk-navy)", color: "#fff" }}>
        <div style={{ maxWidth: 1140, margin: "0 auto", padding: "0 32px" }}>
          <span className="lk-eyebrow" style={{ color: "var(--lk-terracotta)" }}>What we don't do</span>
          <h2 style={{ font: "600 40px/1.15 var(--font-sans)", letterSpacing: "-0.02em", margin: "16px 0 56px", maxWidth: 820, color: "#fff" }}>
            Four things you should know about how this platform is built.
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 32, maxWidth: 920 }}>
            {[
              "We don't export model weights. Your model exists on Likeness infrastructure and nowhere else.",
              "We don't sell or share your reference photos. They train your model and are not used for anything else.",
              "We don't host content you didn't approve. Pending generations are not visible to anyone except you.",
              "We don't pretend revocation is total. Files already downloaded are gone — we'll help with takedowns, but we can't reach into someone's device.",
            ].map((t, i) => (
              <div key={i} style={{
                paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.18)",
                font: "500 19px/1.5 var(--font-sans)", color: "#fff",
              }}>{t}</div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer style={{ padding: "48px 0 32px", borderTop: "1px solid var(--lk-border)" }}>
        <div style={{ maxWidth: 1140, margin: "0 auto", padding: "0 32px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
          <Logo />
          <span style={{ font: "400 13px/1 var(--font-sans)", color: "var(--lk-muted)" }}>Likeness · Pre-seed · Invite-only</span>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="#" style={{ font: "400 13px/1 var(--font-sans)", color: "var(--lk-navy)", textDecoration: "none" }}>Terms</a>
            <a href="#" style={{ font: "400 13px/1 var(--font-sans)", color: "var(--lk-navy)", textDecoration: "none" }}>Privacy</a>
            <a href="#" style={{ font: "400 13px/1 var(--font-sans)", color: "var(--lk-navy)", textDecoration: "none" }}>Compliance · 18 U.S.C. § 2257</a>
          </div>
        </div>
      </footer>
    </div>
  );
};

Object.assign(window, { Marketing });
