// cozyCAD homepage — single file React
const { useState, useEffect } = React;

const THEMES = [
  { id: 'lamplight',  name: 'Lamplight Study', kicker: 'warm cottage · brass & walnut',    night: '#1a1411', surface: '#2b221d', ink: '#f3e4cc', ink2: '#c7b295', accent: '#e8b766', accentInk: '#1a1410' },
  { id: 'apothecary', name: 'Apothecary',      kicker: 'forest · plum · antique gold',     night: '#101812', surface: '#1a2620', ink: '#ebe3d0', ink2: '#b8ad94', accent: '#c89d4e', accentInk: '#0f1612' },
  { id: 'plumbob',    name: 'Plumbob',         kicker: 'sims‑bright · electric green',     night: '#1d1a14', surface: '#2a261e', ink: '#f2ead6', ink2: '#c3b893', accent: '#5fd946', accentInk: '#0d1a0a' },
  { id: 'drafting',   name: 'Drafting Room',   kicker: 'blueprint cyan · kraft paper',     night: '#121822', surface: '#1d2636', ink: '#e4ebf5', ink2: '#aebcd0', accent: '#4fb3d9', accentInk: '#0c1220' },
  { id: 'charcoal',   name: 'Charcoal',        kicker: 'graphite · bone · accent‑agnostic', night: '#141414', surface: '#1f1f1f', ink: '#ebeae6', ink2: '#a8a6a0', accent: '#e8b766', accentInk: '#0f0f0f' },
  { id: 'mint',       name: 'Mint Hearth',     kicker: 'seafoam · matcha · warm cream',    night: '#0f1a18', surface: '#1b2a27', ink: '#e7f0ec', ink2: '#9fb8b1', accent: '#7fc4a8', accentInk: '#0d1816' },
  { id: 'velvet',     name: 'Velvet Arcade',   kicker: 'aubergine · coral · mint',         night: '#1a1220', surface: '#281d34', ink: '#f0e5ee', ink2: '#bfa8c5', accent: '#e98972', accentInk: '#1a0f18' },
];

const ACCENTS = [
  { id: 'gold',     hex: '#e8b766' },
  { id: 'sage',     hex: '#8fb86a' },
  { id: 'blush',    hex: '#e89c8a' },
  { id: 'lavender', hex: '#9db4e8' },
  { id: 'ember',    hex: '#e0826d' },
];

function Home() {
  const [activeTheme, setActiveTheme] = useState('lamplight');
  const [accent, setAccent] = useState('gold');
  const [themeMenuOpen, setThemeMenuOpen] = useState(false);

  // Apply theme to body
  useEffect(() => {
    const t = THEMES.find(x => x.id === activeTheme);
    if (!t) return;
    document.body.style.setProperty('--night', t.night);
    document.body.style.setProperty('--night-2', t.night);
    document.body.style.setProperty('--surface', t.surface);
    document.body.style.setProperty('--ink', t.ink);
    document.body.style.setProperty('--ink-2', t.ink2);
    document.body.style.setProperty('--accent', t.accent);
    document.body.style.setProperty('--accent-ink', t.accentInk);
  }, [activeTheme]);

  useEffect(() => {
    document.body.setAttribute('data-accent', accent);
    const a = ACCENTS.find(x => x.id === accent);
    if (a) document.body.style.setProperty('--accent', a.hex);
  }, [accent]);

  return (
    <>
      <div className="hm-glow"/>
      <Nav activeTheme={activeTheme} setActiveTheme={setActiveTheme} menuOpen={themeMenuOpen} setMenuOpen={setThemeMenuOpen}/>
      <main>
        <Hero/>
        <Logos/>
        <WhoFor/>
        <section id="themes"><Themes active={activeTheme} setActive={setActiveTheme}/></section>
        <Pricing/>
        <CtaBand/>
      </main>
      <Footer accent={accent} setAccent={setAccent}/>
    </>
  );
}

function Wordmark({ size }) {
  return (
    <span className="hm-wordmark" style={size ? { fontSize: size } : null}>
      cozy<b>CAD</b><i className="spark"/>
    </span>
  );
}

function Nav({ activeTheme, setActiveTheme, menuOpen, setMenuOpen }) {
  const active = THEMES.find(t => t.id === activeTheme) || THEMES[0];
  return (
    <nav className="hm-nav">
      <div className="hm-nav-inner">
        <a className="hm-wordmark-link" href="home.html"><Wordmark/></a>
        <div className="hm-nav-links">
          <a>Product</a>
          <a href="#pricing">Pricing</a>
          <a>Gallery</a>
          <a>Docs</a>
        </div>
        <div className="hm-nav-spacer"/>
        <div className="hm-nav-right">
          <div className={`hm-theme-menu${menuOpen ? ' is-open' : ''}`}>
            <button className="hm-theme-trigger" onClick={() => setMenuOpen(!menuOpen)} aria-label="Change theme">
              <span className="hm-theme-dot" style={{ background: active.accent }}/>
              <span className="hm-theme-nm">{active.name}</span>
              <span className="hm-theme-caret">▾</span>
            </button>
            {menuOpen && (
              <div className="hm-theme-pop" onMouseLeave={() => setMenuOpen(false)}>
                <div className="hm-theme-pop-hd">Theme</div>
                {THEMES.map(t => (
                  <button
                    key={t.id}
                    className={`hm-theme-opt${activeTheme === t.id ? ' is-on' : ''}`}
                    onClick={() => { setActiveTheme(t.id); setMenuOpen(false); }}
                  >
                    <span className="sw" style={{ background: t.accent, boxShadow: `0 0 0 2px ${t.surface}` }}/>
                    <span className="nm">{t.name}</span>
                    <span className="kc">{t.kicker}</span>
                  </button>
                ))}
              </div>
            )}
          </div>
          <a className="hm-btn hm-btn-ghost" href="/app">Sign in</a>
          <a className="hm-btn hm-btn-primary" href="index.html">Start building <span className="arr">→</span></a>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <section className="hm-hero hm">
      <div className="hm-eyebrow">
        <span className="dot"/> Works in any browser · no install · <b>Version 0.9 (Beta) now available</b>
      </div>

      <div className="hm-hero-mark">
        <div className="hm-hero-wordmark">
          cozy<em>CAD</em>
          <span className="hm-hero-spark"/>
        </div>
      </div>

      <h1 className="hm-hero-tag">
        Finally, CAD<br/>that doesn't <em>hate you.</em>
      </h1>

      <p className="sub">
        A full architecture &amp; garden studio that runs in the tab you've already got open.
        Design from the sofa, the site, or the passenger seat — <b>any device with a browser.</b>
      </p>

      <div className="ctas">
        <a className="hm-btn hm-btn-primary hm-btn-lg" href="index.html">
          Start building <span className="arr">→</span>
        </a>
        <a className="hm-btn hm-btn-ghost hm-btn-lg" href="#pricing">
          See pricing
        </a>
      </div>
      <p className="fineprint">
        free forever up to <b>50 objects</b> · no card required
      </p>

      <a className="hm-scrollcue" href="#themes" aria-label="Scroll down">
        <span className="hm-scrollcue-line"/>
        <span className="hm-scrollcue-lbl">scroll</span>
        <span className="hm-scrollcue-mouse"><span/></span>
      </a>
    </section>
  );
}

function Logos() {
  const items = [
    { nm: 'Dezeen',         kc: 'editor\'s pick' },
    { nm: 'The Verge',      kc: 'best of 2025' },
    { nm: 'Architect Mag',  kc: 'tools to watch' },
    { nm: 'Product Hunt',   kc: '#1 of the day' },
    { nm: 'Hacker News',    kc: '900+ points' },
  ];
  return (
    <section className="hm-logos hm">
      <div className="label">Nice things people have said</div>
      <div className="hm-logos-row">
        {items.map(i => (
          <div key={i.nm} className="hm-logo">
            {i.nm}
            <span className="kicker">{i.kc}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function Themes({ active, setActive }) {
  return (
    <section className="hm-themes hm">
      <div className="hm-section-head">
        <div>
          <div className="kicker">§ Themes</div>
          <h2>Your CAD, your mood.<br/>Seven of them, actually.</h2>
        </div>
        <p className="aside">
          Every surface, shadow and serif has been tuned as a complete world.
          Pick one now, swap it at 11pm. Your project follows.
        </p>
      </div>
      <div className="hm-theme-grid">
        {THEMES.map(t => (
          <div
            key={t.id}
            className={`hm-theme-card${active === t.id ? ' is-active' : ''}`}
            onClick={() => setActive(t.id)}
          >
            <div
              className="hm-theme-preview"
              style={{
                background: t.surface,
                color: t.ink,
                '--tcta-ink': t.accentInk,
              }}
            >
              <div className="chip" style={{ background: t.accent, opacity: 1 }}/>
              <div className="bar lg"/>
              <div className="bar md"/>
              <div className="bar sm"/>
              <div className="cta" style={{ background: t.accent, color: t.accentInk }}>place wall</div>
            </div>
            <div className="hm-theme-meta">
              <div className="nm">{t.name}</div>
              <div className="ds">{t.kicker}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function WhoFor() {
  const audiences = [
    {
      id: 'homeowners',
      kicker: '01',
      nm: 'Homeowners & daydreamers',
      blurb: 'Rearrange the kitchen before you commit to the kitchen. Try twelve sofas. See the extension in real light before you sign anything.',
      bullets: ['Drag furniture like you’re playing a game', 'See every angle in walk‑through mode', 'Share a link — no software for your partner to install'],
      glyph: 'home',
    },
    {
      id: 'architects',
      kicker: '02',
      nm: 'Architects & designers',
      blurb: 'Full CAD precision — mm‑first inputs, snaps, constraints, paper‑space plotting, DXF / IFC export — without the twelve‑menu‑deep ritual.',
      bullets: ['Drafting‑grade dimensions & schedules', 'Layered paper‑space with title blocks', 'Version history + client comments in‑line'],
      glyph: 'compass',
    },
    {
      id: 'builders',
      kicker: '03',
      nm: 'Builders & trades',
      blurb: 'Open the client’s file on the site phone. Scrub through the floors, tap a wall, read the spec. No licence, no login hunt.',
      bullets: ['Works on the iPhone in your back pocket', 'Measure, annotate, export cut lists', 'No software for the spark & the joiner to buy'],
      glyph: 'hammer',
    },
    {
      id: 'players',
      kicker: '04',
      nm: 'People who just want to play',
      blurb: 'Build a fantasy cabin in the woods at 11pm with a cup of tea. Pick a theme, drag some trees around, light the lamps. That’s the whole brief.',
      bullets: ['Seven themed worlds to drift between', 'No deadline, no client, no export', 'Free forever for 50‑object builds'],
      glyph: 'sparkle',
    },
  ];
  return (
    <section className="hm-whofor hm" id="who">
      <div className="hm-section-head">
        <div>
          <div className="kicker">§ Who it’s for</div>
          <h2>Built for everyone who<br/>has ever opened AutoCAD<br/>and <em>closed it again.</em></h2>
        </div>
        <p className="aside">
          Homeowners, architects, builders, and people who just want to play house at 11pm.
          The same app. The same file. Different amounts of time on their hands.
        </p>
      </div>
      <div className="hm-who-grid">
        {audiences.map(a => (
          <article key={a.id} className="hm-who-card">
            <div className="hm-who-top">
              <span className="hm-who-kicker">{a.kicker}</span>
              <WhoGlyph d={a.glyph}/>
            </div>
            <h3 className="hm-who-nm">{a.nm}</h3>
            <p className="hm-who-blurb">{a.blurb}</p>
            <ul className="hm-who-list">
              {a.bullets.map((b, i) => <li key={i}>{b}</li>)}
            </ul>
          </article>
        ))}
      </div>
    </section>
  );
}

function WhoGlyph({ d }) {
  const p = { width: 26, height: 26, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (d === 'home')    return <svg {...p}><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z"/></svg>;
  if (d === 'compass') return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M16 8l-2.5 5.5L8 16l2.5-5.5z"/></svg>;
  if (d === 'hammer')  return <svg {...p}><path d="M15 4l5 5-3 3-2-2-7 7-3-3 7-7-2-2z"/><path d="M4 20l4-4"/></svg>;
  if (d === 'sparkle') return <svg {...p}><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/><path d="M7 7l3 3M14 14l3 3M17 7l-3 3M10 14l-3 3"/></svg>;
  return null;
}

function Pricing() {
  const tiers = [
    {
      nm: 'Free',
      blurb: 'For dabblers, sketchers, and curious people on a Tuesday.',
      cur: '£', n: '0', per: 'forever',
      features: [
        'Up to <b>50 objects</b> per project',
        'All <b>7 themes</b>',
        'Export to PNG + PDF',
        '1 user',
      ],
      cta: 'Start free',
    },
    {
      nm: 'Per Building',
      blurb: 'For one project with a client or collaborator in the loop.',
      cur: '£', n: '10', per: 'per building / month',
      featured: true,
      tag: 'Most popular',
      features: [
        '<b>1 building</b>, unlimited objects',
        '<b>2 users</b> — architect + client',
        'Real‑time collaboration',
        'Paper‑space plotting · DXF / IFC export',
        'Version history · comments',
      ],
      cta: 'Start 14‑day trial',
    },
    {
      nm: 'Unlimited',
      blurb: 'For studios, developers, and people with a lot of buildings.',
      cur: '£', n: '40', per: 'per month',
      features: [
        '<b>Unlimited buildings</b>',
        '<b>2 users</b> per building',
        'Everything in Per Building',
        'Priority support · SSO',
        'Team workspace',
      ],
      cta: 'Start 14‑day trial',
    },
    {
      nm: 'Extra seat',
      blurb: 'Bring in the joiner, the partner, the landscape architect.',
      cur: '£', n: '5', per: 'per user / month',
      features: [
        'Add a <b>third (or fourth…)</b> user to any building',
        'Stackable with any paid plan',
        'Cancel anytime',
      ],
      cta: 'Add to your plan',
      isAddon: true,
    },
  ];
  return (
    <section className="hm-pricing hm" id="pricing">
      <div className="hm-section-head">
        <div>
          <div className="kicker">§ Pricing</div>
          <h2>Pay for what you build.<br/>Not a seat you'll never fill.</h2>
        </div>
        <p className="aside">
          Free forever to try. Per‑building when you've got a client waiting.
          Unlimited when buildings are a habit. Extra seats when the team grows.
        </p>
      </div>
      <div className="hm-price-grid">
        {tiers.map((t, i) => (
          <React.Fragment key={t.nm}>
            {t.isAddon && <div className="hm-price-divider" aria-hidden="true"/>}
          <div className={`hm-price${t.featured ? ' is-featured' : ''}${t.isAddon ? ' is-addon' : ''}`}>
            {t.tag && <div className="hm-price-tag">{t.tag}</div>}
            <div className="nm">{t.nm}</div>
            <div className="blurb">{t.blurb}</div>
            <div className="amt">
              <span className="cur">{t.cur}</span>
              <span className="n">{t.n}</span>
            </div>
            <div className="per">{t.per}</div>
            <ul>
              {t.features.map((f, i) => (
                <li key={i} dangerouslySetInnerHTML={{ __html: f }}/>
              ))}
            </ul>
            <a className={`hm-btn ${t.featured ? 'hm-btn-primary' : 'hm-btn-ghost'}`} href="#">
              {t.cta} {t.featured && <span className="arr">→</span>}
            </a>
          </div>
          </React.Fragment>
        ))}
      </div>
    </section>
  );
}

function CtaBand() {
  return (
    <section className="hm-cta hm">
      <h2>Build somewhere<br/>to daydream.</h2>
      <p className="sub">No install, no onboarding video, no licence server. Just a browser tab and a blueprint you'll actually enjoy opening.</p>
      <div className="ctas">
        <a className="hm-btn hm-btn-primary hm-btn-lg" href="index.html">
          Open the app <span className="arr">→</span>
        </a>
        <a className="hm-btn hm-btn-ghost hm-btn-lg" href="#">
          Watch 90‑sec demo
        </a>
      </div>
    </section>
  );
}

function Footer({ accent, setAccent }) {
  const cols = [
    { h: 'Product', links: ['Features', 'Themes', 'Pricing', 'Changelog', 'Roadmap'] },
    { h: 'Company', links: ['About', 'Blog', 'Careers', 'Press kit', 'Contact'] },
    { h: 'Resources', links: ['Docs', 'Tutorials', 'Community', 'Sample files', 'Keyboard reference'] },
    { h: 'Legal', links: ['Privacy', 'Terms', 'Cookies', 'DPA', 'Security'] },
  ];
  return (
    <footer className="hm-foot">
      <div className="hm">
        <div className="hm-foot-grid">
          <div className="hm-foot-brand">
            <Wordmark/>
            <p className="tag">Architecture and garden design, made cozy. Made in Bristol · built on caffeine and nice joinery.</p>
          </div>
          {cols.map(c => (
            <div key={c.h} className="hm-foot-col">
              <h4>{c.h}</h4>
              <ul>
                {c.links.map(l => <li key={l}><a>{l}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div className="hm-foot-base">
          <div>© 2026 cozyCAD Ltd. · Registered in England &amp; Wales.</div>
          <div className="accent-picker">
            <span className="lbl">Accent</span>
            {ACCENTS.map(a => (
              <button
                key={a.id}
                className={`hm-accent-swatch${accent === a.id ? ' is-active' : ''}`}
                style={{ background: a.hex }}
                onClick={() => setAccent(a.id)}
                aria-label={`Accent: ${a.id}`}
                title={a.id}
              />
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

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