// ============================================================
// DEMIURGE — LANDING LITE
// The first-touch page. One promise, three numbers, one door
// into the full system page. Reuses .lp-* classes + HeroOrbital.
// ============================================================

const FULL_PAGE = '/full';
const PACKAGES = '/packages';

const LiteBrand = () => (
  <a href="#" className="lp-brand">
    <div className="lp-brand-mark">
      <svg viewBox="0 0 32 32" width="32" height="32" aria-hidden="true" focusable="false">
        <defs>
          <radialGradient id="lite-orb" cx="35%" cy="35%">
            <stop offset="0%" stopColor="#fff"/>
            <stop offset="40%" stopColor="#c8a8ff"/>
            <stop offset="100%" stopColor="#1e1455"/>
          </radialGradient>
          <linearGradient id="lite-ring" x1="0%" x2="100%">
            <stop offset="0%" stopColor="#4be8ff"/>
            <stop offset="100%" stopColor="#8b6bff"/>
          </linearGradient>
        </defs>
        <circle cx="16" cy="16" r="11" fill="url(#lite-orb)"/>
        <ellipse cx="16" cy="16" rx="15" ry="4" fill="none" stroke="url(#lite-ring)" strokeWidth="1" transform="rotate(-22 16 16)"/>
        <ellipse cx="16" cy="16" rx="15" ry="4" fill="none" stroke="rgba(232,201,138,0.4)" strokeWidth="0.5" transform="rotate(22 16 16)"/>
      </svg>
    </div>
    <span className="lp-brand-name">Demiurge</span>
    <span className="lp-brand-sys">/ Systems</span>
  </a>
);

const LiteNav = () => (
  <nav className="lp-nav">
    <div className="lp-nav-inner">
      <LiteBrand/>
      <div className="lp-nav-spacer"></div>
      <div className="lp-nav-links">
        <a href={FULL_PAGE}>Full system</a>
      </div>
      <a href={PACKAGES} className="lp-btn primary lp-nav-cta" style={{padding: '10px 18px', fontSize: 12.5}}>
        Deploy operators
      </a>
    </div>
  </nav>
);

const LiteHero = () => (
  <section className="lp-hero" data-screen-label="Lite Hero">
    <div className="lp">
      <div className="lp-hero-grid">
        <div className="lp-hero-l">
          <div className="lp-hero-coords">
            <span>DMG-OS · v.II</span>
            <span className="pipe">/</span>
            <span className="live">Demo preview</span>
          </div>
          <h1 className="lp-hero-h1">
            <span className="line">Deploy your</span>
            <span className="line">
              <em className="lp-brass underline">digital</em>{" "}
              <em className="lp-brass underline">workforce</em>.
            </span>
          </h1>
          <p className="lp-lede">
            Autonomous operators that book meetings, answer calls, and run
            your growth — without adding headcount.
          </p>
          <div className="lp-hero-cta-row">
            <a href={PACKAGES} className="lp-btn primary lg">
              Deploy your operators
              <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true" focusable="false"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </a>
            <a href={FULL_PAGE} className="lp-btn lg">
              See the full system
              <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true" focusable="false"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </a>
          </div>
        </div>

        <div className="lp-mech">
          <div className="lp-mech-frame">
            <div className="corner tl"></div>
            <div className="corner tr"></div>
            <div className="corner bl"></div>
            <div className="corner br"></div>
          </div>
          <div className="lp-mech-label tl">OPERATOR · NEXUS</div>
          <div className="lp-mech-label br">SIMULATED DISPLAY</div>
          <HeroOrbital/>
        </div>
      </div>
    </div>
  </section>
);

const LiteOfferings = () => {
  const items = [
    { n: '01', h: 'Phone agents', p: 'Calls answered in seconds, day and night.' },
    { n: '02', h: 'Booking agents', p: 'Leads chased, qualified, on your calendar.' },
    { n: '03', h: 'Growth systems', p: 'CRM, follow-up, campaigns — run for you.' },
    { n: '04', h: 'SEO', p: 'Found first when customers search.' },
    { n: '05', h: 'Website design', p: 'Sites built to convert, not decorate.' },
    { n: '06', h: 'Command console', p: 'Your own OS — watch it all run, live.' }
  ];
  return (
    <section className="lp-section tight" data-screen-label="Lite Offerings">
      <div className="lp">
        <div className="lp-eyebrow">/ 01 · What we deploy</div>
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))', gap: 1}}>
          {items.map((s, i) => (
            <a key={i} href={FULL_PAGE} style={{display: 'block', background: '#03040C', padding: '28px 24px', textDecoration: 'none', outline: '1px solid rgba(201,166,116,0.12)'}}>
              <div style={{fontFamily: "'Geist Mono', monospace", fontSize: 10.5, letterSpacing: '0.24em', color: '#C9A674', marginBottom: 12}}>{s.n}</div>
              <div style={{fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontSize: 24, color: '#F5F1E6', marginBottom: 6}}>{s.h}</div>
              <div style={{fontSize: 13.5, lineHeight: 1.5, color: '#8388A8'}}>{s.p}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

const LiteSteps = () => {
  const steps = [
    { n: '01', h: 'Brief us', p: '20 minutes. We map where your leads leak.' },
    { n: '02', h: 'We build', p: 'Your operators are configured and tuned in ~7 days.' },
    { n: '03', h: 'Go live', p: 'Meetings land on your calendar. You watch the console.' }
  ];
  return (
    <section className="lp-section tight" data-screen-label="Lite Steps">
      <div className="lp">
        <div className="lp-eyebrow">/ 02 · How it starts</div>
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 1, background: 'rgba(201,166,116,0.12)', border: '1px solid rgba(201,166,116,0.12)'}}>
          {steps.map((s, i) => (
            <div key={i} style={{background: '#03040C', padding: '32px 28px'}}>
              <div style={{fontFamily: "'Geist Mono', monospace", fontSize: 11, letterSpacing: '0.24em', color: '#C9A674', marginBottom: 14}}>{s.n}</div>
              <div style={{fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontSize: 26, color: '#F5F1E6', marginBottom: 8}}>{s.h}</div>
              <div style={{fontSize: 14.5, lineHeight: 1.55, color: '#8388A8'}}>{s.p}</div>
            </div>
          ))}
        </div>
        <div style={{marginTop: 28, fontFamily: "'Geist Mono', monospace", fontSize: 11.5, letterSpacing: '0.14em', color: '#8388a8'}}>
          FULL SPEC · OPERATORS · PRICING → <a href={FULL_PAGE} style={{color: '#C9A674'}}>THE COMPLETE SYSTEM PAGE</a>
        </div>
      </div>
    </section>
  );
};

const LiteFinal = () => (
  <section className="lp-final" id="deploy" data-screen-label="Lite Final CTA">
    <div className="lp">
      <div className="lp-final-inner">
        <div className="lp-eyebrow" style={{justifyContent: 'center'}}>/ 03 · Intake open</div>
        <h2 className="lp-final-h">
          Book meetings <em className="lp-brass">while you sleep</em>.
        </h2>
        <div className="lp-hero-cta-row" style={{justifyContent: 'center'}}>
          <a href={PACKAGES} className="lp-btn primary lg">
            Deploy your operators
            <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true" focusable="false"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>
        <div className="lp-final-fineprint">
          <span>30-day cancel</span>
          <span className="sep">·</span>
          <span>Live in ~7 days</span>
          <span className="sep">·</span>
          <span><a href={FULL_PAGE} style={{color: 'inherit'}}>Full details →</a></span>
        </div>
      </div>
    </div>
  </section>
);

const LiteFooter = () => (
  <footer className="lp-foot" data-screen-label="Lite Footer">
    <div className="lp">
      <div className="lp-foot-base" style={{borderTop: 'none', paddingTop: 0}}>
        <div className="l">
          <span>© 2026 Demiurge Systems Ltd</span>
          <span style={{margin: '0 10px', opacity: 0.3}}>·</span>
          <span>Registered in England · 17109558</span>
          <span style={{margin: '0 10px', opacity: 0.3}}>·</span>
          <a href="mailto:ops@demiurge.systems" style={{color: 'inherit'}}>ops@demiurge.systems</a>
        </div>
        <div className="r" style={{display: 'flex', gap: 18, flexWrap: 'wrap'}}>
          <a href={FULL_PAGE} style={{color: 'inherit'}}>Full system</a>
          <a href="/legal/privacy" style={{color: 'inherit'}}>Privacy</a>
          <a href="/legal/terms" style={{color: 'inherit'}}>Terms</a>
          <a href="/accessibility" style={{color: 'inherit'}}>Accessibility</a>
          <a href="/legal" style={{color: 'inherit'}}>Legal</a>
        </div>
      </div>
    </div>
  </footer>
);

const LiteApp = () => (
  <React.Fragment>
    <a href="#main-content" className="lp-skip">Skip to main content</a>
    <div className="lp-starfield" aria-hidden="true"></div>
    <div className="lp-vignette" aria-hidden="true"></div>
    <div className="lp-scan" aria-hidden="true"></div>
    <LiteNav/>
    <main id="main-content">
      <LiteHero/>
      <LiteOfferings/>
      <LiteSteps/>
      <LiteFinal/>
    </main>
    <LiteFooter/>
  </React.Fragment>
);

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