/* global React */
const { useState: useStateX, useEffect: useEffectX } = React;

/* =========================================================
   How it works, 4 steps from the onboarding flow
   ========================================================= */
function HowItWorks() {
  const steps = [
    { n: '01', t: 'Tell us about your site', d: 'A few quick questions, industry, goals, vibe. Our AI drafts a starting point in seconds.' },
    { n: '02', t: 'Set your brand kit', d: 'Pick colors, fonts, buttons, and corner radii. Every page inherits them automatically.' },
    { n: '03', t: 'Customize anything', d: 'Drag, drop, edit copy, swap imagery. No code. No theme-wrangling. No stress.' },
    { n: '04', t: 'Publish on green hosting', d: 'One click and you\u2019re live on 100% renewable infrastructure with a free SSL and custom domain.' },
  ];
  return (
    <section id="how" className="section-pad" style={{ background: 'var(--bg-0)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 60 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>How it works</div>
          <h2 className="display display-lg" style={{ margin: 0, maxWidth: '16ch' }}>
            From blank page to published ,<br/>in 3 minutes.
          </h2>
        </div>
        <div className="hw-grid reveal-stagger">
          {steps.map((s) => (
            <div key={s.n} className="hw-step">
              <div className="hw-num mono">{s.n}</div>
              <h3 className="hw-title">{s.t}</h3>
              <p className="hw-desc">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .hw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
        .hw-step { background: var(--bg-1); padding: clamp(28px, 3vw, 40px); min-height: 280px; display: flex; flex-direction: column; gap: 16px; transition: background 0.3s; }
        .hw-step:hover { background: var(--bg-2); }
        .hw-num { font-size: 12px; color: var(--lime); letter-spacing: 0.1em; }
        .hw-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0; color: var(--ink-0); }
        .hw-desc { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
        @media (max-width: 860px) { .hw-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 520px) { .hw-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

/* =========================================================
   Who it's for
   ========================================================= */
function Audience() {
  const cards = [
    { t: 'Freelancers', d: 'Ship client sites in hours, not weeks. White-label hosting and a reusable brand kit for every project.', icon: 'pen' },
    { t: 'Small businesses', d: 'Get online fast, look professional, and sleep well knowing your site is low-carbon.', icon: 'shop' },
    { t: 'Micro-Companies', d: 'Launch-day-ready. Connect your domain, analytics, and forms in minutes, not sprints.', icon: 'rocket' },
  ];
  const ic = {
    pen: <path d="M4 20L14 10L18 14L8 24Z M14 10L18 6L22 10L18 14 M4 20L2 22" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    shop: <><path d="M4 8h16l-2 14H6z" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinejoin="round"/><path d="M8 8V5a4 4 0 018 0v3" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round"/></>,
    rocket: <path d="M12 2s6 4 6 11l-3 3H9l-3-3C6 6 12 2 12 2z M9 16l-3 5 5-3 M15 16l3 5-5-3 M10 10h4" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinejoin="round" strokeLinecap="round"/>,
  };
  return (
    <section className="section-pad" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 60 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>Who it's for</div>
          <h2 className="display display-lg" style={{ margin: 0, maxWidth: '20ch' }}>
            The platform for <span className="green-highlight">climate-considered</span> businesses.<br/>Companies who care.
          </h2>
        </div>
        <div className="aud-grid reveal-stagger">
          {cards.map((c) => (
            <div key={c.t} className="aud-card">
              <div className="aud-icon"><svg width="28" height="28" viewBox="0 0 24 24">{ic[c.icon]}</svg></div>
              <h3 className="aud-title">{c.t}</h3>
              <p className="aud-desc">{c.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .aud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .aud-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 18px; transition: transform 0.4s var(--ease-out), border-color 0.3s; }
        .aud-card:hover { transform: translateY(-4px); border-color: var(--mint); }
        .aud-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(159,232,112,0.1); color: var(--mint); display: grid; place-items: center; }
        .aud-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
        .aud-desc { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0; }
        @media (max-width: 860px) { .aud-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

/* =========================================================
   Features, compact grid
   ========================================================= */
function Features() {
  const features = [
    { t: 'AI-assisted first draft', d: 'Answer a few questions, get a complete site draft in seconds.', tag: 'Speed' },
    { t: 'Reusable brand kit', d: 'Colors, fonts, and components that stay consistent across every page.', tag: 'Consistency' },
    { t: '80+ templates', d: 'Curated for small business, agency, restaurant, portfolio, and more.', tag: 'Start fast' },
    { t: '100% renewable hosting', d: 'Solar & wind-powered data centers. No greenwashing.', tag: 'Green' },
    { t: 'Custom domain + SSL', d: 'Free SSL, one-click domain connection, auto-provisioned CDN.', tag: 'Infra' },
    { t: 'SEO + analytics', d: 'Meta tags, sitemaps, and privacy-first analytics baked in.', tag: 'Growth' },
    { t: 'Carbon reporting', d: 'See your site\u2019s emissions per visit in a live dashboard.', tag: 'Transparent' },
    { t: 'Export anywhere', d: 'Your site, your data. Export to static HTML whenever you like.', tag: 'Ownership' },
  ];
  return (
    <section id="features" className="section-pad" style={{ background: 'var(--bg-0)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 60, display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 40, flexWrap: 'wrap' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>Features</div>
            <h2 className="display display-lg" style={{ margin: 0, maxWidth: '14ch' }}>
              Everything on the critical path.
            </h2>
          </div>
          <p className="lede" style={{ maxWidth: 440 }}>A focused toolkit, not a sprawling platform. No bloat, no plugins, no surprise upsells.</p>
        </div>
        <div className="ft-grid reveal-stagger">
          {features.map((f, i) => (
            <div key={i} className="ft-card">
              <div className="ft-tag mono">{f.tag}</div>
              <h4 className="ft-title">{f.t}</h4>
              <p className="ft-desc">{f.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .ft-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
        .ft-card { background: var(--bg-1); padding: 28px; min-height: 200px; display: flex; flex-direction: column; gap: 12px; transition: background 0.3s; }
        .ft-card:hover { background: var(--bg-2); }
        .ft-tag { font-size: 10px; letter-spacing: 0.14em; color: var(--mint); text-transform: uppercase; }
        .ft-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--ink-0); }
        .ft-desc { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 0; }
        @media (max-width: 960px) { .ft-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 520px) { .ft-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

/* =========================================================
   Roadmap
   ========================================================= */
function Roadmap() {
  const items = [
    { q: 'Q2 · 2026', status: 'shipped', title: 'Closed beta', desc: '100 founding users shape the product. Onboarding, templates, publishing.' },
    { q: 'Q3 · 2026', status: 'now', title: 'Public launch', desc: 'Open sign-ups, 80+ templates, custom domains, analytics, team seats.' },
    { q: 'Q4 · 2026', status: 'next', title: 'Commerce + forms', desc: 'Native storefronts, Stripe payments, advanced forms, webhooks.' },
    { q: 'Q1 · 2027', status: 'next', title: 'Carbon API', desc: 'Public API for measuring, reporting, and offsetting the carbon cost of any site.' },
    { q: 'Q2 · 2027', status: 'later', title: 'Ree for agencies', desc: 'Client billing, white-label, multi-site workspaces, brand-kit libraries.' },
  ];
  const badge = { shipped: '✓ Shipped', now: 'In progress', next: 'Next', later: 'Later' };
  return (
    <section id="roadmap" className="section-pad" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 60 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>Roadmap · Public</div>
          <h2 className="display display-lg" style={{ margin: 0, maxWidth: '16ch' }}>
            What's shipped,<br/>what's coming.
          </h2>
        </div>
        <div className="rm-list reveal-stagger">
          {items.map((it, i) => (
            <div key={i} className={`rm-row rm-${it.status}`}>
              <div className="rm-q mono">{it.q}</div>
              <div className="rm-content">
                <div className="rm-head">
                  <h4 className="rm-title">{it.title}</h4>
                  <span className={`rm-badge rm-badge-${it.status}`}>{badge[it.status]}</span>
                </div>
                <p className="rm-desc">{it.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .rm-list { border-top: 1px solid var(--line); }
        .rm-row { display: grid; grid-template-columns: 180px 1fr; gap: 40px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start; }
        .rm-q { font-size: 12px; color: var(--ink-3); letter-spacing: 0.1em; }
        .rm-now .rm-q { color: var(--lime); }
        .rm-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
        .rm-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
        .rm-desc { font-size: 14px; color: var(--ink-2); margin: 0; max-width: 60ch; }
        .rm-badge { font-size: 10px; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-mono); }
        .rm-badge-shipped { background: rgba(159,232,112,0.12); color: var(--mint); }
        .rm-badge-now { background: var(--lime); color: #0a0a0a; }
        .rm-badge-next { background: var(--bg-3); color: var(--ink-1); }
        .rm-badge-later { background: var(--bg-3); color: var(--ink-3); }
        .rm-later .rm-title { color: var(--ink-2); }
        @media (max-width: 720px) { .rm-row { grid-template-columns: 1fr; gap: 6px; } }
      `}</style>
    </section>
  );
}

/* =========================================================
   FAQ, accordion
   ========================================================= */
function FAQ() {
  const [open, setOpen] = useStateX(0);
  const faqs = [
    { q: 'When does Ree launch?', a: 'Public launch is Q3 2026. Join the waitlist and we\u2019ll email you the moment it\u2019s open, no marketing drip, no drama.' },
    { q: 'What does "carbon-negative" actually mean?', a: 'Every Ree site runs on 100% renewable hosting, and for every tonne of CO₂ we can\u2019t avoid, we remove 1.2 tonnes via verified reforestation and direct-air-capture partners. Net impact: negative.' },
    { q: 'How much will Ree cost?', a: 'We\u2019re finalising pricing, but plans will start free (for a single site, Ree-subdomain) and scale by custom domains, seats, and traffic. Founding members get lifetime pricing locks.' },
    { q: 'Can I bring my own domain?', a: 'Yes. Connect any domain in a couple of clicks. Free SSL, global CDN, zero config.' },
    { q: 'Will I be able to export my site?', a: 'Always. Your content is yours, export to static HTML, import to another platform, or self-host. No lock-in, ever.' },
    { q: 'Do you offer agency / reseller plans?', a: 'Yes, Ree for Agencies ships Q2 2027 with white-label, multi-site workspaces, and client billing. Get in touch if you want early access.' },
    { q: 'Is Ree looking for investors?', a: 'We\u2019re in active conversations for our seed round. See the Investors section below or email get@reesite.com.' },
  ];
  return (
    <section id="faq" className="section-pad" style={{ background: 'var(--bg-0)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div className="faq-grid">
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 24 }}>FAQ</div>
            <h2 className="display display-lg" style={{ margin: '0 0 24px' }}>
              Questions,<br/>answered.
            </h2>
            <p className="lede">Can't find what you're after? Email <a href="mailto:get@reesite.com" style={{ color: 'var(--mint)' }}>get@reesite.com</a> and a real human will reply.</p>
          </div>
          <div className="faq-list reveal">
            {faqs.map((f, i) => (
              <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="faq-plus">{open === i ? '–' : '+'}</span>
                </button>
                <div className="faq-a-wrap">
                  <div className="faq-a">{f.a}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        .faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 8vw, 100px); align-items: start; }
        .faq-list { border-top: 1px solid var(--line); }
        .faq-item { border-bottom: 1px solid var(--line); }
        .faq-q {
          width: 100%; text-align: left; padding: 22px 0;
          display: flex; justify-content: space-between; align-items: center; gap: 20px;
          font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-0);
          transition: color 0.3s;
        }
        .faq-q:hover { color: var(--mint); }
        .faq-plus { font-size: 24px; color: var(--ink-2); font-weight: 300; line-height: 1; }
        .faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease-out); }
        .faq-item.open .faq-a-wrap { grid-template-rows: 1fr; }
        .faq-a { overflow: hidden; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
        .faq-item.open .faq-a { padding-bottom: 24px; }
        @media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { HowItWorks, Audience, Features, Roadmap, FAQ });