// Get Closure — landing page
// Consumes system/tokens.jsx (window.GC_P, GC_FONTS, GC_HEADLINES) and
// system/components.jsx (window.GC_*) — load those files first.

const { useState, useEffect } = React;

const P     = window.GC_P;
const FONTS = window.GC_FONTS;

// ── Page ─────────────────────────────────────────────────────────────────────
function LandingPage({ tweaks }) {
  const headline = window.GC_HEADLINES[tweaks.headline] || window.GC_HEADLINES.nobody;

  return (
    <div style={{
      background: P.bgGrad,
      color: P.ink,
      fontFamily: FONTS.sans,
      minHeight: '100vh',
      overflowX: 'hidden',
      position: 'relative',
    }}>
      <style>{`
        ::selection { background: ${P.butter}; color: ${P.ink}; }
        .gc-link { color: ${P.accent}; text-decoration: none;
                   border-bottom: 1px solid ${P.accentSoft};
                   transition: border-color .15s; }
        .gc-link:hover { border-bottom-color: ${P.accent}; }
      `}</style>

      {/* Sun bloom — top right, matches design system recipe */}
      <div aria-hidden="true" style={{
        position: 'absolute', top: -260, right: -200, width: 720, height: 720,
        borderRadius: '50%',
        background: `radial-gradient(circle, ${P.butter}66 0%, ${P.butter}00 65%)`,
        pointerEvents: 'none', zIndex: 0,
      }} />

      <div style={{ position: 'relative', zIndex: 1 }}>

        {/* ── Nav ───────────────────────────────────────────────────── */}
        <header style={{
          maxWidth: 1100, margin: '0 auto',
          padding: '28px 32px 0',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <window.GC_Wordmark />
          <window.GC_StatusPill>coming soon</window.GC_StatusPill>
        </header>

        {/* ── Hero ──────────────────────────────────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '88px 32px 96px' }}>
          <p style={{
            margin: '0 0 28px', fontFamily: FONTS.sans, fontSize: 13.5,
            color: P.accent, letterSpacing: '0.1em', fontWeight: 500,
            textTransform: 'uppercase',
            display: 'inline-flex', alignItems: 'center', gap: 12,
          }}>
            <span style={{ width: 24, height: 1, background: P.accent }} />
            For UK founders winding down
          </p>

          <h1 style={{
            margin: 0, fontFamily: FONTS.serif,
            fontSize: 'clamp(48px, 8vw, 96px)',
            lineHeight: 1.02, letterSpacing: '-0.022em',
            fontWeight: 400, color: P.ink, maxWidth: 980,
          }}>
            {headline.a}
            {headline.b && <><br />{headline.b}{' '}</>}
            {!headline.b && <br />}
            {/* Hand-circle wraps the italic accent phrase — one per page */}
            <span style={{
              position: 'relative', display: 'inline-block',
              padding: '10px 20px 12px', whiteSpace: 'nowrap',
            }}>
              <span style={{ fontStyle: 'italic', color: P.accent, position: 'relative', zIndex: 1 }}>
                {headline.c}
              </span>
              <window.GC_HandCircle stroke={2.4} />
            </span>
          </h1>

          <div style={{
            marginTop: 48, display: 'grid',
            gridTemplateColumns: 'minmax(0, 1fr) auto',
            gap: 36, alignItems: 'end',
          }}>
            <p style={{
              margin: 0, ...window.GC_TYPE.lede,
              color: P.soft, maxWidth: 640,
            }}>
              A practical guide to closing your UK startup —{' '}
              <span style={{ fontStyle: 'italic', color: P.ink }}>
                written by someone who did it.
              </span>
            </p>
            <window.GC_ArrowMark size={42} />
          </div>
        </section>

        {/* ── Three cards ───────────────────────────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '0 32px 96px' }}>
          <window.GC_Eyebrow fill>What you'll get</window.GC_Eyebrow>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
            gap: 18,
          }}>
            {[
              {
                icon: '✦',
                title: 'A clear path',
                body: 'DS01, MVL, CVL — in plain English. What each one means, what it costs, and what you actually need to file.',
              },
              {
                icon: '◐',
                title: 'No £5k surprise',
                body: "What your accountant will and won't do. When you actually need an insolvency practitioner — and when you really don't.",
              },
              {
                icon: '☉',
                title: 'For founders, not directors',
                body: 'Investors. EMI options. Cap table. The SaaS subscription nobody remembered to cancel.',
              },
            ].map((it, i) => (
              <window.GC_Card key={i}>
                <div style={{
                  width: 40, height: 40, borderRadius: 14,
                  background: P.butterSoft, color: P.accent,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 20, marginBottom: 22, fontFamily: FONTS.serif,
                  border: `1px solid ${P.butter}`,
                }}>{it.icon}</div>
                <h3 style={{
                  margin: '0 0 10px', ...window.GC_TYPE.h3, color: P.ink,
                }}>{it.title}</h3>
                <p style={{ margin: 0, ...window.GC_TYPE.bodySmall, color: P.soft }}>{it.body}</p>
              </window.GC_Card>
            ))}
          </div>
        </section>

        {/* ── Founder note ──────────────────────────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '0 32px 96px' }}>
          <window.GC_Card deep style={{ position: 'relative' }}>
            <span style={{
              position: 'absolute', top: -14, left: 32,
              padding: '5px 14px', borderRadius: 999,
              background: P.accent, color: P.paper,
              fontFamily: FONTS.sans, fontSize: 11, fontWeight: 600,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              whiteSpace: 'nowrap',
            }}>
              a note from me
            </span>

            <p style={{ margin: '8px 0 22px', ...window.GC_TYPE.pullquote, color: P.ink, maxWidth: 820 }}>
              I'm shutting my company down right now. I'm writing this because the only
              people who answered my questions wanted{' '}
              <window.GC_Highlight color={P.butter}>£350 an hour</window.GC_Highlight>
              {' '}— and I couldn't find a single guide that knew what an EMI option pool was.
            </p>

            <p style={{ margin: 0, ...window.GC_TYPE.body, color: P.soft, maxWidth: 620 }}>
              If you're going through this, you're really not the only one. Get Closure
              is being written, one chapter at a time, by{' '}
              <span style={{ color: P.ink, fontStyle: 'italic', fontFamily: FONTS.serif, fontSize: 17 }}>
                someone half a step ahead of you.
              </span>
            </p>

            <div style={{
              marginTop: 28, paddingTop: 22, borderTop: `1px solid ${P.rule}`,
              display: 'flex', alignItems: 'center', gap: 14,
            }}>
              <span style={{
                width: 40, height: 40, borderRadius: '50%',
                background: P.bg, color: P.accent,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: FONTS.serif, fontSize: 18, fontWeight: 500,
                border: `1px solid ${P.rule}`,
              }}>
                {(tweaks.founderName || 'A').trim()[0].toUpperCase()}
              </span>
              <div style={{ lineHeight: 1.35 }}>
                <div style={{ fontFamily: FONTS.serif, fontSize: 18, fontWeight: 500, color: P.ink, letterSpacing: '-0.005em' }}>
                  {tweaks.founderName || '[ your name ]'}
                </div>
                <div style={{ ...window.GC_TYPE.caption, color: P.muted, marginTop: 2, fontStyle: 'italic' }}>
                  founder · still in the thick of it
                </div>
              </div>
            </div>
          </window.GC_Card>
        </section>

        {/* ── CTA ───────────────────────────────────────────────────── */}
        <section style={{ maxWidth: 720, margin: '0 auto', padding: '0 32px 56px' }}>
          <h2 style={{ margin: '0 0 14px', ...window.GC_TYPE.h1, color: P.ink }}>
            Want to know when{' '}
            <span style={{ fontStyle: 'italic', color: P.accent, position: 'relative', display: 'inline-block', whiteSpace: 'nowrap' }}>
              it's ready
              <window.GC_HandUnderline color={P.butter} height={14} stroke={2.4} offset={4} />
            </span>?
          </h2>
          <p style={{ margin: '0 0 28px', ...window.GC_TYPE.body, color: P.soft, maxWidth: 480 }}>
            One quiet email when the first chapter lands. Reply to it if you want
            to talk — there's a person on the other side.
          </p>
          <window.GC_EmailForm />
        </section>

        {/* ── Social proof ──────────────────────────────────────────── */}
        {tweaks.socialProof && (
          <section style={{ maxWidth: 720, margin: '0 auto', padding: '40px 32px 64px', textAlign: 'center' }}>
            <p style={{
              margin: '0 auto', ...window.GC_TYPE.lede,
              color: P.soft, fontStyle: 'italic', maxWidth: 540,
            }}>
              <span style={{ fontSize: '1.35em', color: P.accent, fontWeight: 500, fontFeatureSettings: '"tnum"' }}>
                966
              </span>{' '}
              UK-backed startups shut down last year.{' '}
              <span style={{ color: P.muted }}>Most did it alone.</span>
            </p>
          </section>
        )}

        {/* ── Footer ────────────────────────────────────────────────── */}
        <footer style={{
          maxWidth: 1100, margin: '0 auto',
          padding: '40px 32px 36px',
          borderTop: `1px solid ${P.rule}`,
          marginTop: 24,
          display: 'flex', flexWrap: 'wrap',
          gap: 16, alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12,
            fontFamily: FONTS.sans, fontSize: 13, color: P.muted,
            whiteSpace: 'nowrap',
          }}>
            <window.GC_SunMark color={P.muted} size={16} />
            <span>getclosure.co.uk · written in London · 2026</span>
          </div>
          <a href="mailto:hello@getclosure.co.uk" className="gc-link" style={{ fontFamily: FONTS.sans, fontSize: 13.5 }}>
            hello@getclosure.co.uk
          </a>
        </footer>

      </div>
    </div>
  );
}

// ── App + Tweaks ─────────────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "nobody",
  "founderName": "",
  "socialProof": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.body.style.background = P.bg;
  }, []);

  return (
    <>
      <LandingPage tweaks={t} />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Headline">
          <TweakSelect
            label="Lead line"
            value={t.headline}
            options={[
              { value: 'nobody',  label: 'The thing nobody tells you…' },
              { value: 'proper',  label: 'Close your UK startup properly.' },
              { value: 'finally', label: 'Finally — a clear guide…' },
            ]}
            onChange={(v) => setTweak('headline', v)}
          />
        </TweakSection>

        <TweakSection label="Founder">
          <TweakText
            label="Your name"
            value={t.founderName}
            placeholder="e.g. Sam Patel"
            onChange={(v) => setTweak('founderName', v)}
          />
        </TweakSection>

        <TweakSection label="Content">
          <TweakToggle
            label="966 social proof line"
            value={t.socialProof}
            onChange={(v) => setTweak('socialProof', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);