/* Usovo landing page — sections. Values verbatim from the source DC. */
const DS = window.UsovoDesignSystem_db7cfc || {};
const { PillButton, Eyebrow, SectionHeader, StatCard, PricingCard, FAQItem, CheckRow } = DS;
const IMG = p => `../../assets/images/${p}`;
const DOWNLOAD_URL = '/download';

function Nav() {
  return (
    <nav className="usovo-nav" style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 40px' }}>
      <span style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em' }}>usovo</span>
      <div className="usovo-nav-links" style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', display: 'flex', gap: 32, fontSize: 18, opacity: 0.5 }}>
        <a href="#studios">Studios</a><a href="#local">Why local</a><a href="#pricing">Pricing</a><a href="#faq">FAQ</a>
      </div>
      <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
        {/* <a href="#pricing" style={{ fontSize: 18, opacity: 0.5 }}>Sign in</a> */}
        <a href={DOWNLOAD_URL} title="Download for Mac" style={{ fontFamily: 'inherit', width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#000', color: '#FFF', border: '1px solid #000', borderRadius: '50%', cursor: 'pointer', fontSize: 22, lineHeight: 1, padding: 0 }}><span style={{ transform: 'translateY(3px)' }}>↓</span></a>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <header className="usovo-hero" style={{ padding: '40px 40px 0', textAlign: 'center'}}>
      <h1 className="usovo-hero-title" style={{ fontSize: 88, lineHeight: 0.95, fontWeight: 500, letterSpacing: '-0.03em', margin: '0 auto', maxWidth: '15ch' }}>Local voice generation. <em style={{ fontWeight: 400 }}>Unlimited</em>, for a flat $4/mo.</h1>
      <p className="usovo-hero-lede" style={{ fontSize: 22, lineHeight: 1.4, letterSpacing: '-0.01em', margin: '24px auto 0', opacity: 0.65, maxWidth: '52ch' }}>Traditional AI voice labs meter every character you generate. Usovo runs voice generation locally on your Mac, so the cost isn't metered at all — it's the cheapest voice generation gets, because nothing is being rented.</p>
      <div className="usovo-hero-actions" style={{ display: 'flex', gap: 16, marginTop: 32, justifyContent: 'center' }}>
        <PillButton variant="dark" href={DOWNLOAD_URL}>Download for Mac</PillButton>
        <PillButton variant="outline" onClick={() => document.getElementById('compare').scrollIntoView({ behavior: 'smooth' })}>See the comparison</PillButton>
      </div>
      <div className="usovo-hero-tags" style={{ padding: '48px 0 0', display: 'flex', justifyContent: 'center', gap: 40, fontSize: 12, letterSpacing: '0.02em', textTransform: 'uppercase', opacity: 0.45 }}>
        <span>Runs open models locally</span><span>·</span><span>Speech</span><span>·</span><span>Voice cloning</span><span>·</span><span>Long-form audio</span>
      </div>
    </header>
  );
}

function Studios() {
  return (
    <section id="studios" className="usovo-section" style={{ padding: '128px 40px 0', scrollMarginTop: -90  }}>
      <SectionHeader eyebrow="Studios" title="Your audio, orchestrated at home" lede="Speech and long-form are ready today — royalty-free, and never leaving your Mac. Music and Foley are next." />
      <div className="usovo-studios-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, marginTop: 56 }}>
        <div style={{ background: '#FAF5F0', borderRadius: 32, padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ background: '#FCFAF7', borderRadius: 24, padding: 24 }}>
            <p style={{ margin: 0, fontSize: 12, letterSpacing: '0.02em', textTransform: 'uppercase', opacity: 0.45 }}>Speech & voice</p>
            <p style={{ margin: '12px 0 0', fontSize: 18, lineHeight: 1.3, fontStyle: 'italic' }}>“…and the door, at last, was hers to open.”</p>
            <p style={{ margin: '16px 0 0', fontSize: 15, opacity: 0.5 }}>Narrator · cloned live at your mic · local</p>
          </div>
          <div style={{ marginTop: 'auto' }}>
            <h3 style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em', margin: '16px 0 0' }}>Narration that stays yours</h3>
            <p style={{ fontSize: 15, lineHeight: 1.4, opacity: 0.6, margin: '8px 0 0' }}>Dialogue, narration and cloned voices — recorded nowhere but your own disk.</p>
          </div>
        </div>
        <div style={{ borderRadius: 32, overflow: 'hidden', position: 'relative', minHeight: 380 }}>
          <img src={IMG('flower-blur.png')} alt="Painting: tulip field" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          <span style={{ position: 'absolute', top: 24, right: 24, fontSize: 12, letterSpacing: '0.02em', textTransform: 'uppercase', color: '#FCFAF7', borderRadius: 32, padding: '6px 14px', border: '1px solid rgba(252,250,247,0.5)' }}>Coming soon</span>
          <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: 24, background: 'linear-gradient(transparent,rgba(22,26,10,0.72))' }}>
            <h3 style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em', margin: 0, color: '#FCFAF7' }}>Music, on the way</h3>
            <p style={{ fontSize: 15, lineHeight: 1.4, color: 'rgba(252,250,247,0.85)', margin: '8px 0 0' }}>Scores that will hold together across a whole game or channel — one style, endless takes.</p>
          </div>
        </div>
        <div style={{ background: '#FAF5F0', borderRadius: 32, padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ background: '#FCFAF7', borderRadius: 24, padding: 24 }}>
            <p style={{ margin: 0, fontSize: 12, letterSpacing: '0.02em', textTransform: 'uppercase', opacity: 0.45 }}>Long-form</p>
            <p style={{ margin: '12px 0 0', fontSize: 18, lineHeight: 1.3 }}>Audiobook · 80,000 characters</p>
            <div style={{ height: 6, background: '#E9E2D6', borderRadius: 3, marginTop: 16, overflow: 'hidden' }}><span style={{ display: 'block', height: '100%', width: '68%', background: '#5B6E2C' }}></span></div>
            <p style={{ margin: '12px 0 0', fontSize: 15, opacity: 0.5 }}>Elsewhere ≈ $48 · here, included</p>
          </div>
          <div style={{ marginTop: 'auto' }}>
            <h3 style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em', margin: '16px 0 0' }}>Audiobooks that run overnight</h3>
            <p style={{ fontSize: 15, lineHeight: 1.4, opacity: 0.6, margin: '8px 0 0' }}>Long-form runs the cloud bills by the character — queue a whole audiobook overnight instead. Foley and sound effects are next.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Ownership() {
  return (
    <section className="usovo-section" style={{ padding: '128px 40px 0' }}>
      <div className="usovo-ownership-grid" style={{ display: 'grid', gridTemplateColumns: '6fr 5fr', gap: 80, alignItems: 'center' }}>
        <div>
          <h2 className="usovo-h2" style={{ fontSize: 72, lineHeight: 0.9, fontWeight: 500, letterSpacing: '-0.03em', margin: 0 }}>AI that understands <em style={{ fontWeight: 400 }}>ownership</em>.</h2>
          <p style={{ fontSize: 18, lineHeight: 1.4, opacity: 0.6, margin: '24px 0 0', maxWidth: '46ch' }}>Usovo is a wordplay on <em>habere et usu</em> — to own and to use. Everything generated is royalty-free, unlimited on the free plan, and produced by your hardware, on your hours.</p>
          <div style={{ marginTop: 40, borderTop: '1px solid #E2E2E2' }}>
            <CheckRow>Royalty-free, even on Free</CheckRow>
            <CheckRow>Your voice never uploads anywhere</CheckRow>
            <CheckRow>Batch runs in the background</CheckRow>
            <CheckRow>Works fully offline</CheckRow>
          </div>
        </div>
        <figure style={{ margin: 0 }}>
          <img src={IMG('flower-figure.png')} alt="Painting: a figure among flowers" style={{ display: 'block', width: '100%', aspectRatio: '5/6', objectFit: 'cover', borderRadius: 32 }} />
          <figcaption style={{ fontSize: 12, letterSpacing: '0.02em', textTransform: 'uppercase', opacity: 0.45, marginTop: 16 }}></figcaption>
        </figure>
      </div>
    </section>
  );
}

function Stats() {
  return (
    <section className="usovo-section" style={{ padding: '128px 40px 0' }}>
      <div className="usovo-stats-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48 }}>
        <h2 className="usovo-h2" style={{ fontSize: 72, lineHeight: 0.9, fontWeight: 500, letterSpacing: '-0.03em', margin: 0, maxWidth: '12ch' }}>Built for abundance, not anxiety</h2>
        {/* <Eyebrow>At scale</Eyebrow> */}
      </div>
      <div className="usovo-stats-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24 }}>
        <StatCard stat="Infinite" label="No scaling anxiety" body="Generations on the free plan. Unlimited is the baseline, not the upsell." />
        <StatCard stat="0" label="Nothing to watch" body="Usage meters, credits or tokens. There is no counter running." />
        <StatCard stat="100%" label="Private by geometry" body="Generated on your machine. There is nowhere for your data to be upload to." />
      </div>
    </section>
  );
}

function WhyLocal() {
  const cells = [
    ['No scaling anxiety', 'Flat pricing means a productive month costs the same as a quiet one. Working harder is rewarded, not billed.'],
    ['First on Apple silicon', 'Speech models that famously don’t run on Mac, re-engineered so they do — and quickly. Music is next.'],
    ['Private by default', 'Prompts, drafts and your voices stay on the machine. Nothing is uploaded because nothing needs to be.'],
    ['Works your hours', 'Queue a night of renders and go to bed. It’s your hardware; it runs in the background.'],
  ];
  return (
    <section id="local" className="usovo-section" style={{ padding: '128px 40px 0', scrollMarginTop: -90  }}>
      <div className="usovo-whylocal-grid" style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 80 }}>
        <div>
          <Eyebrow>Why local</Eyebrow>
          <h2 style={{ fontSize: 56, lineHeight: 0.95, fontWeight: 500, letterSpacing: '-0.03em', margin: '24px 0 0' }}>The cloud charges rent. Your Mac already paid.</h2>
          <p style={{ fontSize: 18, lineHeight: 1.4, opacity: 0.6, margin: '24px 0 0', maxWidth: '42ch' }}>Open models were meant for everyone, then stopped at developers. Usovo carries them the last mile — no terminal, no dependencies, no per-generation bill.</p>
        </div>
        <div className="usovo-whylocal-cells" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '40px 48px' }}>
          {cells.map(([h, b]) => (
            <div key={h} style={{ borderTop: '1px solid #E2E2E2', paddingTop: 24 }}>
              <h3 style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em', margin: 0 }}>{h}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.4, opacity: 0.6, margin: '8px 0 0' }}>{b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  return (
    <section id="pricing" className="usovo-section" style={{ padding: '128px 40px 0', scrollMarginTop: -95 }}>
      <SectionHeader align="center" eyebrow="Pricing" title="One decision, not a calculator" lede="Two plans, both unlimited. Pay for bigger features, never for using them more." />
      <div className="usovo-pricing-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, maxWidth: 936, margin: '56px auto 0' }}>
        <PricingCard plan="Free" price="$0" note="forever" features={['Unlimited speech', 'Sound effects & music — coming soon', 'Royalty-free, always', 'Fully offline']} cta="Download free" href={DOWNLOAD_URL} />
        <PricingCard dark badge="Most useful" plan="Pro" price="$4" per="/mo" note="flat — still unlimited" features={['Everything in Free', 'Long-form audio & audiobooks', 'Voice cloning', 'Batch & overnight runs']} cta="Go Studio" href={DOWNLOAD_URL} />
      </div>
    </section>
  );
}

function Comparison() {
  const rows = [
    ['Pricing model', 'Flat monthly fee', 'Metered by credit'],
    ['Generations', 'Unlimited', 'Metered credits'],
    ['Where audio is made', 'Your Mac, offline', 'Their cloud'],
    ['Voice Cloning', 'Included, never uploaded', 'Extra credits, uploaded to cloud'],
    ['Royalty-free on free plan', 'Always', 'Often not'],
    ['80k-character audiobook', 'Included', '≈ $48'],
    ['Works offline', 'Yes', 'No'],
  ];
  return (
    <section id="compare" className="usovo-section usovo-compare" style={{ padding: '128px 40px 0', scrollMarginTop: -70 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48 }}>
        <h2 className="usovo-h2" style={{ fontSize: 72, lineHeight: 0.9, fontWeight: 500, letterSpacing: '-0.03em', margin: 0, maxWidth: '14ch' }}>See how Usovo stacks up</h2>
        {/* <Eyebrow>Compared</Eyebrow> */}
      </div>
      <div className="usovo-compare-grid" style={{ display: 'grid', gridTemplateColumns: '7fr 4fr', gap: 24 }}>
        <div className="usovo-compare-box" style={{ background: '#FAF5F0', borderRadius: 32, padding: '16px 40px' }}>
          <div className="usovo-compare-head" style={{ display: 'grid', gridTemplateColumns: '1fr 160px 160px', gap: '0 24px', padding: '16px 0', borderBottom: '1px solid #E9E2D6', fontSize: 12, letterSpacing: '0.02em', textTransform: 'uppercase', opacity: 0.45 }}><span></span><span>Usovo</span><span>Cloud tools</span></div>
          {rows.map(([label, us, them]) => (
            <div key={label} className="usovo-compare-row" style={{ display: 'grid', gridTemplateColumns: '1fr 160px 160px', gap: '0 24px', padding: '16px 0', borderBottom: '1px solid #E9E2D6', fontSize: 18, alignItems: 'baseline' }}>
              <span>{label}</span><span style={{ color: '#5B6E2C', fontWeight: 500 }}>{us}</span><span style={{ opacity: 0.45 }}>{them}</span>
            </div>
          ))}
        </div>
        <div className="usovo-compare-img" style={{ borderRadius: 32, overflow: 'hidden', position: 'relative', minHeight: 420 }}>
          <img src={IMG('swimmer-dive.png')} alt="Painting: a swimmer beneath bright water" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
      </div>
    </section>
  );
}

function Quote() {
  return (
    <section style={{ padding: '128px 40px 0', textAlign: 'center' }}>
      <Eyebrow style={{ marginBottom: 32 }}>From the beta cohort</Eyebrow>
      <blockquote className="usovo-quote-text" style={{ fontSize: 40, lineHeight: 1.1, letterSpacing: '-0.02em', fontWeight: 400, maxWidth: '28ch', margin: '32px auto 0' }}>“I just love generating voiceovers and audiobooks on the fly!”</blockquote>
      <p style={{ fontSize: 15, opacity: 0.5, margin: '24px 0 0' }}>— Audio book listener, beta cohort</p>
    </section>
  );
}

function DarkCTA() {
  return (
    <section className="usovo-darkcta" style={{ margin: '128px 16px 0', position: 'relative', overflow: 'hidden', borderRadius: 32 }}>
      <img className="usovo-darkcta-img" src={IMG('car-field.png')} alt="Painting: a blue car in a field of flowers" style={{ display: 'block', width: '100%', height: 520, objectFit: 'cover', objectPosition: '50% 62%', filter: 'brightness(0.6)' }} />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', padding: '0 40px' }}>
        <h2 className="usovo-darkcta-title" style={{ fontSize: 88, lineHeight: 0.9, fontWeight: 500, letterSpacing: '-0.03em', color: '#FCFAF7', margin: 0 }}><em style={{ fontWeight: 400 }}>Habere et usu.</em><br />Own, and use.</h2>
        <div style={{ display: 'flex', gap: 16, marginTop: 40 }}>
          <PillButton variant="paper" href={DOWNLOAD_URL}>Download for Mac — Apple silicon</PillButton>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [openIndex, setOpenIndex] = React.useState(0);
  const faqs = [
    ['Is it really unlimited?', 'Yes. Generation happens on your own hardware, so there is no per-use cost for us to pass on. The free plan has no caps; Studio adds bigger features, not bigger allowances.'],
    ['What Macs does it run on?', 'Any Apple silicon Mac (M1 and later). Models are re-engineered for the Apple GPU — speech today, with music and sound effects next.'],
    ['Is the output royalty-free?', 'Everything you generate is yours to use commercially — on the free plan too. No attribution, no license tiers.'],
    ['Where does my data go?', 'Nowhere. Prompts, drafts and cloned voices stay on your disk. Usovo works fully offline once models are downloaded.'],
    ['Whose voice can I clone?', 'Only one that can consent live, at your microphone. Cloning starts with the speaker recording themselves reading a consent phrase aloud — there’s no upload path, so a voice can’t be cloned from someone else’s existing audio. That rules out celebrities, public figures, or anyone who isn’t in the room consenting when you hit record.'],
    ['How is this different from ElevenLabs or Suno?', 'They meter the cloud; you rent every generation. Usovo runs locally with flat pricing — an 80k-character audiobook that costs about $48 elsewhere is simply included.'],
  ];
  return (
    <section id="faq" className="usovo-section" style={{ padding: '128px 40px', scrollMarginTop: +42  }}>
      <div className="usovo-faq-grid" style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 80 }}>
        <div>
          <Eyebrow>FAQ</Eyebrow>
          <h2 className="usovo-h2" style={{ fontSize: 72, lineHeight: 0.9, fontWeight: 500, letterSpacing: '-0.03em', margin: '24px 0 0' }}>Ask away</h2>
          <p style={{ fontSize: 18, lineHeight: 1.4, opacity: 0.6, margin: '24px 0 0', maxWidth: '38ch' }}>Everything else lives in the manifesto — or write to us directly.</p>
        </div>
        <div>{faqs.map(([q, a], i) => <FAQItem key={q} q={q} a={a} open={openIndex === i} onToggle={() => setOpenIndex(openIndex === i ? -1 : i)} />)}</div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="usovo-footer" style={{ background: '#161A0A', color: 'rgba(252,250,247,0.6)', position: 'relative', overflow: 'hidden', borderRadius: 32, margin: 16 }}>
      <div className="usovo-footer-inner" style={{ padding: '64px 40px 0' }}>
        <div className="usovo-footer-grid" style={{ display: 'grid', gridTemplateColumns: '7fr 5fr', gap: 80, alignItems: 'start' }}>
          <h2 className="usovo-footer-title" style={{ fontSize: 88, lineHeight: 0.9, fontWeight: 500, letterSpacing: '-0.03em', color: '#FCFAF7', margin: 0 }}>Own. Use.<br />Usovo.</h2>
          <div className="usovo-footer-links" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 48px', fontSize: 18, lineHeight: 2 }}>
            <div><p style={{ margin: '0 0 8px', fontSize: 12, letterSpacing: '0.02em', textTransform: 'uppercase', opacity: 0.5 }}>Product</p><a href="#studios" style={{ display: 'block', color: 'rgba(252,250,247,0.6)' }}>Studios</a><a href="#local" style={{ display: 'block', color: 'rgba(252,250,247,0.6)' }}>Why local</a><a href="#pricing" style={{ display: 'block', color: 'rgba(252,250,247,0.6)' }}>Pricing</a></div>
            <div><p style={{ margin: '0 0 8px', fontSize: 12, letterSpacing: '0.02em', textTransform: 'uppercase', opacity: 0.5 }}>Company</p><a href="#faq" style={{ display: 'block', color: 'rgba(252,250,247,0.6)' }}>FAQ</a><a href="/terms" style={{ display: 'block', color: 'rgba(252,250,247,0.6)' }}>Terms</a><a href="/privacy" style={{ display: 'block', color: 'rgba(252,250,247,0.6)' }}>Privacy</a><a href="/refunds" style={{ display: 'block', color: 'rgba(252,250,247,0.6)' }}>Refunds</a><a href="/open-source" style={{ display: 'block', color: 'rgba(252,250,247,0.6)' }}>Licenses</a></div>
          </div>
        </div>
        <p style={{ fontSize: 15, margin: '40px 0 0', paddingBottom: 48 }}>Usovo — from <em>habere et usu</em>: to own and to use. © 2026</p>
      </div>
    </footer>
  );
}

function LandingPage() {
  return (
    <div data-screen-label="Usovo landing" className="usovo-page" style={{ width: 1440, margin: '0 auto', background: '#FCFAF7' }}>
      <Nav /><Hero /><Studios /><Ownership /><Stats /><WhyLocal /><Pricing /><Comparison /><Quote /><DarkCTA /><FAQ /><Footer />
    </div>
  );
}
window.LandingPage = LandingPage;