// app.jsx — Page composition + tweaks
const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "neural",
  "palette": "iridescent",
  "autoRotate": true,
  "tagline": "The Future of Intelligence Starts Here.",
  "showFAQ": true
}/*EDITMODE-END*/;

const TAGLINE_OPTIONS = [
  "The Future of Intelligence Starts Here.",
  "An instrument of mind.",
  "The substrate of intelligence.",
  "Where superintelligence takes a name.",
  "A flagship for the post-human era.",
];

// ----- Icons (line-glyph SVGs) -----
const Glyph = {
  Diamond: (p) => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1" {...p}>
      <path d="M24 4 L44 20 L24 44 L4 20 Z" />
      <path d="M4 20 L44 20" />
      <path d="M14 12 L24 20 L34 12" />
      <path d="M24 20 L24 44" />
    </svg>
  ),
  Lock: (p) => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1" {...p}>
      <rect x="10" y="22" width="28" height="20" rx="2" />
      <path d="M16 22 V14 a8 8 0 0 1 16 0 V22" />
      <circle cx="24" cy="32" r="2" />
    </svg>
  ),
  Globe: (p) => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1" {...p}>
      <circle cx="24" cy="24" r="18" />
      <ellipse cx="24" cy="24" rx="8" ry="18" />
      <path d="M6 24 H42" />
      <path d="M9 14 H39" />
      <path d="M9 34 H39" />
    </svg>
  ),
  Spark: (p) => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1" {...p}>
      <path d="M24 6 L26 22 L42 24 L26 26 L24 42 L22 26 L6 24 L22 22 Z" />
    </svg>
  ),
  Vault: (p) => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1" {...p}>
      <rect x="4" y="8" width="40" height="32" rx="2" />
      <circle cx="24" cy="24" r="9" />
      <circle cx="24" cy="24" r="3" />
      <path d="M24 11 V15 M24 33 V37 M11 24 H15 M33 24 H37" />
    </svg>
  ),
  Compass: (p) => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1" {...p}>
      <circle cx="24" cy="24" r="18" />
      <path d="M30 18 L26 26 L18 30 L22 22 Z" />
      <circle cx="24" cy="24" r="1.5" fill="currentColor" />
    </svg>
  ),
};

// ----- Nav -----
function Nav() {
  return (
    <nav className="nav">
      <div className="left">
        <span className="dot"></span>
        <span className="mark">GODMODEL</span>
      </div>
      <div className="right">
        <a className="nav-cta" href="https://sedo.com/search/details/?domain=godmodel.com&origin=domaindetails" target="_blank" rel="noopener noreferrer">
          <span>Inquire</span>
          <span className="nav-cta-arrow">→</span>
        </a>
      </div>
    </nav>
  );
}

// ----- Hero -----
function Hero({ tagline }) {
  return (
    <header className="hero" data-screen-label="01 Hero">
      <div className="hero-eyebrow">
        <span className="line"></span>
        <span>Premium Domain · Available for Acquisition</span>
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <h1 className="hero-wordmark">
          <span className="wordmark-bg"></span>
          <span className="word">godmodel</span><span className="dot">.</span><span className="word">com</span>
        </h1>
        <p className="hero-tagline">{tagline}</p>
      </div>

      <div className="hero-meta">
        <div className="col">
          <span>Listed on</span>
          <span style={{ color: 'var(--ink)'}}>Sedo · Marketplace</span>
        </div>
        <div className="col">
          <span>Status</span>
          <span style={{ color: '#6ee7b7'}}>● Available · Accepting Offers</span>
        </div>
        <div className="col right">
          <span>Category</span>
          <span style={{ color: 'var(--ink)'}}>AI · AGI · ASI</span>
        </div>
      </div>

      <div className="scroll-hint">
        <span>Scroll</span>
        <span className="stroke"></span>
      </div>
    </header>
  );
}

// ----- Etymology / Naming -----
function Etymology() {
  return (
    <section className="block" data-screen-label="02 Etymology">
      <div className="container">
        <div className="section-eyebrow">
          <span className="num">01</span>
          <span>The Name</span>
        </div>
        <h2 className="section-title">A two-syllable <em>thesis</em> on what intelligence becomes.</h2>

        <div className="etymology">
          <div className="left">
            <div className="word-display"><span className="gm">god</span>model</div>
          </div>
          <div className="right">
            <p className="definition">
              <em>"a model with the breadth, capability, and authority that ends the era of incremental scaling — the model after which there is no 'next model.'"</em>
            </p>
            <div className="breakdown">
              <div className="row">
                <span className="key">Reads as</span>
                <span className="val">A serious, declarative product name — the kind a frontier lab uses for its <em>final</em> release line.</span>
              </div>
              <div className="row">
                <span className="key">Sounds as</span>
                <span className="val">Stress on the first syllable. Memorable in the way <em>"hyperscale"</em> or <em>"foundation"</em> never quite were.</span>
              </div>
              <div className="row">
                <span className="key">Adjacent to</span>
                <span className="val">Foundation Model · World Model · Frontier Model — but with the <em>ceiling</em> built into the name itself.</span>
              </div>
              <div className="row">
                <span className="key">Owns</span>
                <span className="val">A category that doesn't exist yet, but will. The branding asset for the lab that gets there first.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ----- Value props -----
function ValueGrid() {
  const cells = [
    {
      glyph: <Glyph.Diamond />,
      title: 'Category-defining',
      body: 'Eight letters. One concept. Names this strong don\'t sit on the shelf — they reorder the category around them.',
    },
    {
      glyph: <Glyph.Spark />,
      title: 'Built for the frontier',
      body: 'Reads as a peer to Anthropic, OpenAI, DeepMind. A name that doesn\'t flinch at the ambitions of an AGI roadmap.',
    },
    {
      glyph: <Glyph.Globe />,
      title: 'Universally legible',
      body: 'No hyphens, no numerals, no non-native phonemes. Pronounceable on every continent, in every press cycle.',
    },
    {
      glyph: <Glyph.Vault />,
      title: 'Singular asset',
      body: 'There is one godmodel.com. Defensible at the registry layer, the trademark layer, and the cultural layer.',
    },
    {
      glyph: <Glyph.Compass />,
      title: 'Strategic optionality',
      body: 'Anchor a research lab. Brand a flagship model. Stake a venture thesis. The name is the position.',
    },
    {
      glyph: <Glyph.Lock />,
      title: 'Escrow protected',
      body: 'Transferred via Sedo with full escrow. No counter-party risk, full chain of custody, white-glove handoff.',
    },
  ];
  return (
    <section className="block solid" data-screen-label="03 Value">
      <div className="container">
        <div className="section-eyebrow">
          <span className="num">02</span>
          <span>Why It Matters</span>
        </div>
        <h2 className="section-title">A name is the <em>cheapest</em> form of leverage you'll ever buy.</h2>
        <p className="section-lede">
          Every category-leading company was named before it was built. Stripe. Anthropic. OpenAI. The name set the ceiling. Buying the right one early is the highest-ROI move on the cap table.
        </p>

        <div className="value-grid">
          {cells.map((c, i) => (
            <div className="value-cell" key={i}>
              <span className="index">{String(i + 1).padStart(2, '0')} / {String(cells.length).padStart(2, '0')}</span>
              <div className="glyph">{c.glyph}</div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ----- Buyer profile -----
function BuyerProfile() {
  const buyers = [
    { tag: 'Frontier Lab', title: 'Research organizations chasing AGI / ASI', body: 'Anchor your model line. Own the URL where your scaling roadmap ends.' },
    { tag: 'AI-First Startup', title: 'Companies whose product is the model', body: 'A wordmark that sounds like Series-D the day you pick it up.' },
    { tag: 'Think Tank', title: 'Policy & alignment institutes', body: 'A neutral, declarative home for long-horizon AI safety research.' },
    { tag: 'Strategic Holder', title: 'Investors and brand portfolios', body: 'Tier-1 generic. Appreciates with the category. Trades on Sedo.' },
  ];

  const cardRefs = useRef([]);
  useEffect(() => {
    const handlers = cardRefs.current.map((el, i) => {
      if (!el) return null;
      const fn = (e) => {
        const r = el.getBoundingClientRect();
        el.style.setProperty('--mx', `${e.clientX - r.left}px`);
        el.style.setProperty('--my', `${e.clientY - r.top}px`);
      };
      el.addEventListener('mousemove', fn);
      return { el, fn };
    });
    return () => handlers.forEach(h => h && h.el.removeEventListener('mousemove', h.fn));
  }, []);

  return (
    <section className="block" data-screen-label="04 Buyer">
      <div className="container">
        <div className="section-eyebrow">
          <span className="num">03</span>
          <span>Who This Is For</span>
        </div>
        <h2 className="section-title">Four kinds of buyer. <em>One</em> domain.</h2>
        <p className="section-lede">
          If you see yourself in any of these rows, the math has already worked itself out. Reach out before someone else does.
        </p>

        <div className="buyer-strip">
          {buyers.map((b, i) => (
            <div className="buyer-card" key={i} ref={el => cardRefs.current[i] = el}>
              <div className="tag"><span className="dot"></span>{b.tag}</div>
              <h4>{b.title}</h4>
              <p>{b.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ----- Marquee -----
function Marquee() {
  const phrase = (
    <span>
      <span className="star">✦</span> Foundation Model
      <span className="star">✦</span> Frontier Lab
      <span className="star">✦</span> AGI Roadmap
      <span className="star">✦</span> World Model
      <span className="star">✦</span> Superintelligence
      <span className="star">✦</span> Alignment
      <span className="star">✦</span> Post-AGI
    </span>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        {phrase}{phrase}{phrase}
      </div>
    </div>
  );
}

// ----- FAQ -----
function FAQ() {
  const items = [
    { q: 'What\'s the asking price?', a: 'Bring a serious offer. The domain is listed on Sedo with their secure offer flow; we evaluate every inquiry that arrives through the marketplace.' },
    { q: 'How does the transfer work?', a: 'Sedo handles the entire transaction — escrow, registrar push, and ownership change. Funds release only after the domain is in your registrar account. Standard transfer is 3–7 business days.' },
    { q: 'Why list on Sedo?', a: 'Sedo is the largest neutral marketplace for premium domains. It exists so neither side has to trust the other — only the escrow.' },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="block solid" data-screen-label="05 FAQ">
      <div className="container">
        <div className="section-eyebrow">
          <span className="num">04</span>
          <span>Acquisition FAQ</span>
        </div>
        <h2 className="section-title">Everything a serious buyer asks <em>before</em> the first email.</h2>

        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span>{it.q}</span>
                <span className="plus">+</span>
              </div>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ----- CTA -----
function CTA() {
  return (
    <section className="cta-block" data-screen-label="06 CTA">
      <div className="cta-orb"></div>
      <div className="inner container">
        <div className="section-eyebrow" style={{ justifyContent: 'center' }}>
          <span className="num">05</span>
          <span>Acquisition</span>
        </div>
        <h2 className="cta-title">Ready to Shape <em>the Future?</em></h2>
        <p className="cta-sub">
          All inquiries route through Sedo's secure marketplace. Escrow, transfer, and ownership change are handled end-to-end. No back-channel, no broker games — just the cleanest path from your name to a category-defining domain.
        </p>

        <a className="cta-button" href="https://sedo.com/search/details/?domain=godmodel.com&origin=domaindetails" target="_blank" rel="noopener noreferrer">
          <span>Make an offer on Sedo</span>
          <span className="arrow">→</span>
        </a>

        <div className="cta-trust">
          <span><span className="check">✓</span> Secure Escrow</span>
          <span><span className="check">✓</span> 3M+ Buyers</span>
          <span><span className="check">✓</span> Verified Transfer</span>
          <span><span className="check">✓</span> No-touch Process</span>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="left">© 2026 GODMODEL.COM · Premium AI Domain</div>
      <div className="right">
        <span>Listed on Sedo</span>
        <span>·</span>
        <span>Drag the orb · Scroll to fly</span>
      </div>
    </footer>
  );
}

// ----- Tweaks panel -----
function Tweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero" />
      <TweakToggle
        label="Auto-rotate"
        value={tweaks.autoRotate}
        onChange={(v) => setTweak('autoRotate', v)}
      />

      <TweakSection label="Palette" />
      <TweakRadio
        label="Theme"
        value={tweaks.palette}
        onChange={(v) => setTweak('palette', v)}
        options={[
          { value: 'iridescent', label: 'Iri' },
          { value: 'obsidian', label: 'Obs' },
          { value: 'plasma', label: 'Plas' },
          { value: 'aurora', label: 'Aur' },
          { value: 'solar', label: 'Sol' },
        ]}
      />

      <TweakSection label="Tagline" />
      <TweakSelect
        label="Preset"
        value={tweaks.tagline}
        onChange={(v) => setTweak('tagline', v)}
        options={TAGLINE_OPTIONS.map(t => ({ value: t, label: t }))}
      />
      <TweakText
        label="Custom"
        value={tweaks.tagline}
        onChange={(v) => setTweak('tagline', v)}
      />

      <TweakSection label="Sections" />
      <TweakToggle
        label="Show FAQ"
        value={tweaks.showFAQ}
        onChange={(v) => setTweak('showFAQ', v)}
      />
    </TweaksPanel>
  );
}

// ----- Root -----
function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const sceneRef = useRef(null);

  // Boot Three.js scene once
  useEffect(() => {
    const canvas = document.getElementById('hero-canvas');
    sceneRef.current = window.HeroScene.create(canvas);
    return () => sceneRef.current && sceneRef.current.destroy();
  }, []);

  // Apply tweaks
  useEffect(() => { sceneRef.current && sceneRef.current.setVariant(tweaks.hero); }, [tweaks.hero]);
  useEffect(() => { sceneRef.current && sceneRef.current.setPalette(tweaks.palette); }, [tweaks.palette]);
  useEffect(() => { sceneRef.current && sceneRef.current.setAutoRotate(tweaks.autoRotate); }, [tweaks.autoRotate]);

  // Apply CSS palette accents to match
  useEffect(() => {
    const map = {
      iridescent: { accent: '#c4b5fd', accent2: '#fcd5b5', accent3: '#a8e6ff', bg: '#07070a' },
      obsidian:   { accent: '#d6d2c8', accent2: '#ffffff', accent3: '#8b8680', bg: '#050507' },
      plasma:     { accent: '#ff4d8f', accent2: '#00e0ff', accent3: '#8a2be2', bg: '#06030d' },
      aurora:     { accent: '#6ee7b7', accent2: '#a8e6ff', accent3: '#c4b5fd', bg: '#040b0a' },
      solar:      { accent: '#fcd5b5', accent2: '#ff8a3d', accent3: '#ffe27a', bg: '#0a0703' },
    };
    const p = map[tweaks.palette] || map.iridescent;
    document.documentElement.style.setProperty('--accent', p.accent);
    document.documentElement.style.setProperty('--accent-2', p.accent2);
    document.documentElement.style.setProperty('--accent-3', p.accent3);
    document.documentElement.style.setProperty('--bg', p.bg);
  }, [tweaks.palette]);

  return (
    <>
      <Nav />
      <div className="page">
        <Hero tagline={tweaks.tagline} />
        <Etymology />
        <ValueGrid />
        <Marquee />
        <BuyerProfile />
        {tweaks.showFAQ && <FAQ />}
        <CTA />
        <Footer />
      </div>
      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

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