// Kinō landing page — sections
// Components are written assuming `Glyph`, `Wordmark`, INK/PAPER/JADE/GOLD/MUTED are on window
// from src/glyph.jsx.

const { useState } = React;

// ---------- Reusable ----------
function RuleLabel({ children, color }) {
  return (
    <div style={{
      display: "inline-flex", alignItems: "center", gap: 12, color: color || MUTED,
      fontFamily: "Inter, sans-serif", fontSize: 11, letterSpacing: "0.32em",
      textTransform: "uppercase", fontWeight: 500
    }}>
      <span style={{ width: 22, height: 1, background: "currentColor", opacity: 0.5 }} />
      <span>{children}</span>
    </div>);

}

function Macron({ width = 64, height = 3, color }) {
  return (
    <span style={{
      display: "inline-block", width, height, borderRadius: height,
      background: color || GOLD
    }} />);

}

// ---------- Email capture ----------
function EmailCapture({ accent, variant = "light", id, autofocus, ctaLabel = "Join the waitlist" }) {
  const [email, setEmail] = useState("");
  const [state, setState] = useState("idle"); // idle | loading | error | success
  const [msg, setMsg] = useState("");

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
      setState("error");
      setMsg("Please enter a valid email.");
      return;
    }
    setState("loading");
    try {
      const res = await fetch("/api/subscribe", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: email.trim() }),
      });
      const data = await res.json();
      if (res.ok) {
        setState("success");
        setMsg("You're on the list. We'll be in touch.");
      } else if (res.status === 409) {
        setState("success");
        setMsg("You're already on the list.");
      } else {
        setState("error");
        setMsg(data.error || "Something went wrong. Please try again.");
      }
    } catch {
      setState("error");
      setMsg("Something went wrong. Please try again.");
    }
  };

  const dark = variant === "dark";
  const fg = dark ? PAPER : INK;
  const bg = dark ? "rgba(247,244,237,0.08)" : "#fff";
  const border = dark ? "rgba(247,244,237,0.22)" : "rgba(28,37,33,0.18)";
  const placeholder = dark ? "rgba(247,244,237,0.5)" : "rgba(28,37,33,0.4)";

  if (state === "success") {
    return (
      <div style={{
        display: "flex", alignItems: "center", gap: 14, padding: "20px 22px",
        border: `1px solid ${dark ? "rgba(247,244,237,0.22)" : "rgba(74,107,92,0.35)"}`,
        background: dark ? "rgba(247,244,237,0.04)" : "rgba(74,107,92,0.06)",
        borderRadius: 2, color: fg
      }}>
        <span style={{
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          width: 24, height: 24, borderRadius: 999,
          background: JADE, color: PAPER, fontFamily: "Inter", fontSize: 13, fontWeight: 600
        }}>✓</span>
        <div style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 20, fontStyle: "italic" }}>
          {msg}
        </div>
      </div>);

  }

  return (
    <form onSubmit={onSubmit} style={{ width: "100%" }}>
      <div className="kino-capture" style={{
        display: "flex", border: `1px solid ${state === "error" ? "#B45A3C" : border}`,
        background: bg, borderRadius: 2, overflow: "hidden",
        transition: "border-color 200ms ease"
      }}>
        <input
          type="email"
          inputMode="email"
          autoComplete="email"
          autoFocus={autofocus}
          placeholder="your@email.com"
          value={email}
          onChange={(e) => {setEmail(e.target.value);if (state === "error") setState("idle");}}
          style={{
            flex: 1, minWidth: 0, padding: "20px 22px", border: "none", outline: "none",
            background: "transparent", color: fg,
            fontFamily: "Inter, sans-serif", fontSize: 16, letterSpacing: "0.005em"
          }} />
        
        <button
          type="submit"
          disabled={state === "loading"}
          style={{
            border: "none", cursor: state === "loading" ? "default" : "pointer", padding: "0 28px",
            background: dark ? PAPER : INK, color: dark ? INK : PAPER,
            fontFamily: "Inter, sans-serif", fontSize: 13, fontWeight: 500,
            letterSpacing: "0.16em", textTransform: "uppercase",
            transition: "background 180ms ease",
            display: "flex", alignItems: "center", gap: 10,
            opacity: state === "loading" ? 0.6 : 1,
          }}
          onMouseEnter={(e) => { if (state !== "loading") e.currentTarget.style.background = accent || GOLD; }}
          onMouseLeave={(e) => { if (state !== "loading") e.currentTarget.style.background = dark ? PAPER : INK; }}>

          {state === "loading" ? "…" : <>{ctaLabel}<span style={{ fontSize: 14, marginTop: -1 }}>→</span></>}
        </button>
      </div>
      <style>{`
        .kino-capture input::placeholder { color: ${placeholder}; }
      `}</style>
      {state === "error" &&
      <div style={{
        marginTop: 10, fontFamily: "Inter, sans-serif", fontSize: 13,
        color: "#B45A3C", letterSpacing: "0.01em"
      }}>{msg}</div>
      }
      {state === "idle" &&
      <div style={{
        marginTop: 14, fontFamily: "Inter, sans-serif", fontSize: 12,
        color: dark ? "rgba(247,244,237,0.5)" : MUTED, letterSpacing: "0.04em"
      }}>
          No spam. One email when we open access. Unsubscribe anytime.
        </div>
      }
    </form>);

}

// ---------- Top nav (minimal) ----------
function TopNav() {
  return (
    <div className="kino-topnav" style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "28px 0"
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <Glyph size={32} color={INK} accent={GOLD} />
        <Wordmark color={INK} accent={GOLD} size={22} tracking={0.36} />
      </div>
      <div style={{
        fontFamily: "Inter, sans-serif", fontSize: 12, letterSpacing: "0.24em",
        textTransform: "uppercase", color: MUTED, fontWeight: 500
      }}>
        Coming 2026
      </div>
    </div>);

}

// ---------- Hero ----------
function Hero({ headline, subhead, accent }) {
  return (
    <section
      data-margin-anchor data-numeral="I" data-kicker="The invitation"
      data-note="No more confusion or complexity. Just clarity and simplicity towards achieving your goal."
      data-left-anchor data-fragment="ki · nō — a quiet beginning, in your own time."
      className="kino-section-hero"
      style={{ paddingTop: 64, paddingBottom: 120, position: "relative" }}
    >
      <RuleLabel>A new beginning</RuleLabel>
      <h1 style={{
        fontFamily: '"Cormorant Garamond", serif', fontWeight: 400,
        fontSize: "clamp(44px, 6.4vw, 88px)", lineHeight: 1.04,
        letterSpacing: "-0.018em", color: INK,
        margin: "28px 0 0", maxWidth: 980, textWrap: "balance"
      }}>
        {headline.before}
        <span style={{ fontStyle: "italic", color: INK, position: "relative" }}>
          {" "}{headline.italic}
          <span aria-hidden style={{
            position: "absolute", left: 0, right: 0, bottom: "-0.12em",
            height: 4, background: accent || GOLD, borderRadius: 4, opacity: 0.85
          }} />
        </span>
        {headline.after}
      </h1>
      <p style={{
        marginTop: 36, maxWidth: 580,
        fontFamily: "Inter, sans-serif", fontSize: 19, lineHeight: 1.55,
        color: "rgba(28,37,33,0.72)", letterSpacing: "0.005em"
      }}>
        {subhead}
      </p>
      <div style={{ marginTop: 56, maxWidth: 560 }}>
        <EmailCapture accent={accent} ctaLabel="Join the waitlist" />
      </div>
    </section>);

}

// ---------- Problem ----------
function Problem({ accent }) {
  const points = [
  { lead: "You've started before.", body: "Maybe twice. Maybe more. Each app promised something different, and none of them stayed." },
  { lead: "The advice contradicts itself.", body: "Lift heavy. Don't lift heavy. Eat carbs. Skip carbs. You stopped reading and started feeling tired." },
  { lead: "You don't have an hour to figure it out.", body: "Between work, family, and the rest of it, the energy to even begin is the first thing that's missing." }];

  return (
    <section style={{
      padding: "120px 0", borderTop: "1px solid rgba(28,37,33,0.10)"
    }}>
      <RuleLabel>Where most plans lose you</RuleLabel>
      <h2 style={{
        fontFamily: '"Cormorant Garamond", serif', fontWeight: 400,
        fontSize: "clamp(34px, 4.4vw, 56px)", lineHeight: 1.08,
        letterSpacing: "-0.012em", color: INK,
        margin: "24px 0 0", maxWidth: 760, textWrap: "balance"
      }}>
        It isn't that you don't <span style={{ fontStyle: "italic" }}>care</span>.
        It's that no one made it simple.
      </h2>
      <div style={{
        marginTop: 80, display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
        gap: 56
      }}>
        {points.map((p, i) =>
        <div key={i}>
            <div style={{
            fontFamily: '"Cormorant Garamond", serif', fontStyle: "italic",
            fontSize: 14, color: accent || GOLD, letterSpacing: "0.02em",
            marginBottom: 16
          }}>
              {String(i + 1).padStart(2, "0")}
            </div>
            <div style={{
            fontFamily: '"Cormorant Garamond", serif', fontWeight: 400,
            fontSize: 28, lineHeight: 1.18, color: INK,
            letterSpacing: "-0.005em", marginBottom: 16
          }}>
              {p.lead}
            </div>
            <div style={{
            fontFamily: "Inter, sans-serif", fontSize: 15.5, lineHeight: 1.6,
            color: "rgba(28,37,33,0.66)"
          }}>
              {p.body}
            </div>
          </div>
        )}
      </div>
    </section>);

}

// ---------- Solution ----------
function Solution({ accent }) {
  const pillars = [
  {
    kicker: "Built around you",
    title: "A plan from a thoughtful conversation.",
    body: "We start with a short onboarding — your history, your time, your body, what you've tried. Out of that comes a plan that fits the life you actually have."
  },
  {
    kicker: "Always teaching",
    title: "You'll know why you're doing it.",
    body: "Every session quietly explains the reasoning. Why this movement, why this rest, why now. You leave each workout a little more fluent in your own body."
  },
  {
    kicker: "Moves with you",
    title: "It adapts as you do.",
    body: "Plans aren't static. As you get stronger, recover faster, or push through a hard week, Kinō listens and adjusts. You don't need to start over."
  }];

  return (
    <section
      data-margin-anchor data-numeral="II" data-kicker="What it is" data-dark="true"
      data-note="Built around your time, your body, your weeks. It walks alongside, and explains as it goes."
      className="kino-section-solution"
      style={{
      padding: "140px 0",
      background: INK, color: PAPER,
      marginLeft: "calc(50% - 50vw)", marginRight: "calc(50% - 50vw)",
      paddingLeft: "calc(50vw - 50%)", paddingRight: "calc(50vw - 50%)",
      position: "relative"
    }}>
      {/* Decorative twin gold bars in left margin */}
      <div aria-hidden className="kino-twinbars" style={{
        position: "absolute", left: "max(48px, calc(50vw - 600px - 80px))",
        top: 200, display: "flex", gap: 10, alignItems: "flex-end", pointerEvents: "none",
      }}>
        <span style={{ display: "block", width: 2, height: 880, background: GOLD, borderRadius: 2 }} />
        <span style={{ display: "block", width: 2, height: 840, background: GOLD, borderRadius: 2 }} />
      </div>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 40px" }}
        className="kino-solution-inner">
      <div style={{ maxWidth: 720 }}>
        <RuleLabel color="rgba(247,244,237,0.55)">What Kinō is</RuleLabel>
        <h2 style={{
            fontFamily: '"Cormorant Garamond", serif', fontWeight: 400,
            fontSize: "clamp(36px, 4.8vw, 64px)", lineHeight: 1.06,
            letterSpacing: "-0.014em", color: PAPER,
            margin: "24px 0 28px", textWrap: "balance"
          }}>
          A quiet, intelligent guide for getting back into your body.
        </h2>
        <p style={{
            fontFamily: "Inter, sans-serif", fontSize: 18, lineHeight: 1.6,
            color: "rgba(247,244,237,0.7)"
          }}>
          Not a coach yelling in your ear. Not another library of workouts to sift through.
          A thinking system that meets you where you are, and walks alongside.
        </p>
      </div>

      <div style={{ marginTop: 96, display: "flex", flexDirection: "column", gap: 0 }}>
        {pillars.map((p, i) =>
          <div key={i} className="kino-pillar" style={{
            display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.6fr)",
            gap: 64, padding: "48px 0",
            borderTop: "1px solid rgba(247,244,237,0.14)"
          }}>
            <div style={{ display: "flex", alignItems: "flex-start", gap: 18 }}>
              <Macron width={36} height={3} color={accent || GOLD} />
              <div className="kino-pillar-kicker" style={{
                fontFamily: "Inter, sans-serif", fontSize: 12, fontWeight: 500,
                letterSpacing: "0.24em", textTransform: "uppercase",
                color: "rgba(247,244,237,0.6)", paddingTop: 1
              }}>
                {p.kicker}
              </div>
            </div>
            <div>
              <div style={{
                fontFamily: '"Cormorant Garamond", serif', fontWeight: 400,
                fontSize: "clamp(24px, 2.6vw, 34px)", lineHeight: 1.15,
                letterSpacing: "-0.008em", color: PAPER,
                marginBottom: 18, textWrap: "balance"
              }}>
                {p.title}
              </div>
              <div style={{
                fontFamily: "Inter, sans-serif", fontSize: 16, lineHeight: 1.65,
                color: "rgba(247,244,237,0.65)", maxWidth: 620
              }}>
                {p.body}
              </div>
            </div>
          </div>
          )}
        <div style={{ borderTop: "1px solid rgba(247,244,237,0.14)" }} />
      </div>
      </div>
    </section>);

}

// ---------- Final CTA ----------
function FinalCTA({ accent, line }) {
  return (
    <section
      data-margin-anchor data-numeral="III" data-kicker="The waitlist"
      data-note="No countdown, no launch hype. A single email, when it's ready."
      className="kino-section-cta"
      style={{
      padding: "160px 0",
      borderTop: "1px solid rgba(28,37,33,0.10)",
      textAlign: "center"
    }}>
      <div style={{ display: "flex", justifyContent: "center", marginBottom: 40 }}>
        <Glyph size={56} color={INK} accent={accent || GOLD} />
      </div>
      <div style={{ display: "flex", justifyContent: "center", marginBottom: 28 }}>
        <RuleLabel>The waitlist</RuleLabel>
      </div>
      <h2 style={{
        fontFamily: '"Cormorant Garamond", serif', fontWeight: 400,
        fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 1.06,
        letterSpacing: "-0.014em", color: INK,
        margin: "0 auto 24px", maxWidth: 820, textWrap: "balance"
      }}>
        {line}
      </h2>
      <p style={{
        fontFamily: "Inter, sans-serif", fontSize: 17, lineHeight: 1.6,
        color: "rgba(28,37,33,0.65)", maxWidth: 520, margin: "0 auto 56px"
      }}>
        Be the first to know when we open access. No launch hype, no countdown — just a quiet email when it's ready.
      </p>
      <div className="kino-cta-wrap" style={{ maxWidth: 560, margin: "0 auto", position: "relative" }}>
        {/* Minimal gold arrows pointing toward the waitlist CTA */}
        <div aria-hidden className="kino-cta-arrow kino-cta-arrow-left" style={{
          position: "absolute", right: "calc(100% + 28px)", top: 32,
          width: 110, height: 1, background: GOLD, transform: "translateY(-50%)",
          pointerEvents: "none",
        }}>
          <span style={{
            position: "absolute", right: 0, top: "50%",
            width: 8, height: 8, borderRight: `1px solid ${GOLD}`, borderTop: `1px solid ${GOLD}`,
            transform: "translateY(-50%) rotate(45deg)",
          }} />
        </div>
        <div aria-hidden className="kino-cta-arrow kino-cta-arrow-right" style={{
          position: "absolute", left: "calc(100% + 28px)", top: 32,
          width: 110, height: 1, background: GOLD, transform: "translateY(-50%)",
          pointerEvents: "none",
        }}>
          <span style={{
            position: "absolute", left: 0, top: "50%",
            width: 8, height: 8, borderLeft: `1px solid ${GOLD}`, borderTop: `1px solid ${GOLD}`,
            transform: "translateY(-50%) rotate(-45deg)",
          }} />
        </div>
        <EmailCapture accent={accent} ctaLabel="Join the waitlist" />
      </div>
    </section>);

}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="kino-footer" style={{
      padding: "48px 0 40px",
      borderTop: "1px solid rgba(28,37,33,0.10)",
      display: "flex", alignItems: "center", justifyContent: "space-between",
      flexWrap: "wrap", gap: 16
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <Glyph size={22} color={INK} accent={GOLD} />
        <Wordmark color={INK} accent={GOLD} size={16} tracking={0.34} />
      </div>
      <div style={{
        fontFamily: "Inter, sans-serif", fontSize: 12, color: MUTED,
        letterSpacing: "0.04em"
      }}>© 2026 Kinō. Function, Knowledge, Progress.

      </div>
    </footer>);

}

Object.assign(window, {
  TopNav, Hero, Problem, Solution, FinalCTA, Footer,
  EmailCapture, RuleLabel, Macron
});