/* Hedoniq VTO landing page — assembled from the Claude Design bundle.
   Tweaks baked in: split layout · crimson accent · headline hardcoded in HeroRight. */

const SHOPIFY_CDN = 'https://cdn.shopify.com/s/files/1/0898/5611/5017/files';

const IMG = {
  heroEditorial: `${SHOPIFY_CDN}/Hedoniqbyflorescer-06892.jpg?v=1773161732`,
  resultSample:  `${SHOPIFY_CDN}/Hedoniq_by_florescer-07146.jpg?v=1773161732`,
  garmentFlat:   `${SHOPIFY_CDN}/MajesticTopSilk.jpg?v=1772572326`,
  ugc: [
    `${SHOPIFY_CDN}/Hedoniqbyflorescer-06892.jpg?v=1773161732`,
    `${SHOPIFY_CDN}/Hedoniq_by_florescer-07146.jpg?v=1773161732`,
    `${SHOPIFY_CDN}/Hedoniqbyflorescer-08270.jpg?v=1773163603`,
    `${SHOPIFY_CDN}/Majestic_Set_Zane.jpg?v=1773075957`,
    `${SHOPIFY_CDN}/Majestic_Silk.jpg?v=1773075957`,
    `${SHOPIFY_CDN}/MajesticSilkback.jpg?v=1773075957`,
  ],
};

function HeroLeft() {
  return (
    <div className="hero-left">
      <div className="placeholder-tag">[ EDITORIAL · MAJESTIC SILK · BLACK ]</div>
      <div className="hero-badge"><span className="pulse"/>LIVE · 312 TRANSFORMING NOW</div>
      <div
        className="edit-image"
        style={{
          background: `linear-gradient(180deg, rgba(10,9,8,0) 55%, rgba(10,9,8,0.85) 100%), url('${IMG.heroEditorial}') center/cover no-repeat`,
        }}
      />
      <div className="hero-marquee">
        <span className="red">Seduce</span><br/>the world.
      </div>
    </div>
  );
}

function HeroRight() {
  return (
    <div className="hero-right" id="tryon">
      <div>
        <div className="eyebrow">NEW · AI VIRTUAL TRY-ON</div>
        <h1 className="h1" style={{ marginTop: 18 }}>
          See yourself in <span className="it">silk.</span><br/>
          In 30 seconds.
        </h1>
        <p className="sub" style={{ marginTop: 22 }}>
          Upload one photo. Our model drapes you in the <b style={{ color: 'var(--ink)' }}>Majestic Silk Top</b> —
          the piece other men call too much, and the ones who matter call inevitable.
        </p>
      </div>
      <TryOnTool/>
    </div>
  );
}

function HowItWorks() {
  const steps = [
    { n: '01', t: 'Upload one photo', d: 'Any clear, front-facing shot. Bathroom mirror works. We only need your shoulders up.', time: '~ 10 SECONDS' },
    { n: '02', t: 'We render you in silk', d: 'Our model maps your proportions, pose, and lighting — then drapes you in the Majestic Silk Top.', time: '~ 30 SECONDS' },
    { n: '03', t: 'See the man you hide', d: 'A full editorial render, delivered to your inbox. Keep it. Share it. Then wear it for real — 15% off.', time: 'INSTANT · ON-SCREEN' },
  ];
  return (
    <section>
      <div className="section-head">
        <div className="section-kicker">HOW IT WORKS · THREE MOVES</div>
        <h2 className="section-h2">
          One photo.<br/>
          <span className="it">One version</span> of you,<br/>
          uncaged.
        </h2>
      </div>
      <div className="how-grid">
        {steps.map(s => (
          <div className="how-step" key={s.n}>
            <div className="how-step-num">{s.n}</div>
            <div className="how-step-title">{s.t}</div>
            <div className="how-step-body">{s.d}</div>
            <div className="how-step-time">{s.time}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Stats() {
  return (
    <div className="stats">
      <div className="stat">
        <div className="stat-num">47,218</div>
        <div className="stat-label">TRANSFORMATIONS · 30 DAYS</div>
      </div>
      <div className="stat">
        <div className="stat-num">4.9</div>
        <div className="stat-label">AVG. RATING · ★★★★★</div>
      </div>
      <div className="stat">
        <div className="stat-num">68%</div>
        <div className="stat-label">BUY AFTER SEEING IT</div>
      </div>
      <div className="stat">
        <div className="stat-num">30s</div>
        <div className="stat-label">AVG. RENDER TIME</div>
      </div>
    </div>
  );
}

function UGCCard({ span, rowSpan, name, meta, seed, badge }) {
  const imgUrl = IMG.ugc[seed % IMG.ugc.length];
  return (
    <div className="ugc-card" style={{ gridColumn: `span ${span}`, gridRow: `span ${rowSpan}` }}>
      <div
        className="ugc-img"
        style={{
          backgroundImage: `url('${imgUrl}')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }}
      />
      {badge && <div className="ugc-badge">{badge}</div>}
      <div className="ugc-overlay">
        <div className="ugc-name">{name}</div>
        <div className="ugc-meta">
          <span>{meta}</span>
        </div>
      </div>
    </div>
  );
}

function UGCSection() {
  return (
    <section className="ugc">
      <div className="section-head">
        <div className="section-kicker">REAL MEN · REAL RENDERS</div>
        <h2 className="section-h2">
          47,000 men saw themselves<br/>
          <span className="it">differently.</span> Here's what they shared.
        </h2>
      </div>
      <div className="ugc-grid">
        <UGCCard span={3} rowSpan={2} name="Julien, 34" meta="PARIS · +ADDED TO CART" seed={0} badge="BEFORE / AFTER"/>
        <UGCCard span={3} rowSpan={1} name="Marco, 29" meta="MILAN" seed={1}/>
        <div className="ugc-quote">
          <div className="stars">★★★★★</div>
          <div className="q">
            "I didn't expect to flinch. The render looked more like me than my own mirror does at 7 AM.
            Ordered the same day."
          </div>
          <div className="attrib">— RAFAEL M., DUBAI · VERIFIED BUYER</div>
        </div>
        <UGCCard span={3} rowSpan={1} name="Daniel, 41" meta="LONDON · PURCHASED" seed={2}/>
        <UGCCard span={3} rowSpan={1} name="Theo, 27" meta="BERLIN" seed={3} badge="TOP 1%"/>
        <UGCCard span={3} rowSpan={2} name="Amir, 38" meta="DUBAI · PURCHASED" seed={4}/>
        <UGCCard span={3} rowSpan={1} name="Luca, 32" meta="ROME · PURCHASED" seed={5}/>
        <UGCCard span={6} rowSpan={1} name="Feature wall · 12k renders tagged #HEDONIQME" meta="SCROLL ENDLESSLY →" seed={0}/>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="final-cta">
      <div className="eyebrow" style={{ justifyContent: 'center', marginBottom: 40 }}>
        <span style={{ display: 'inline-block' }}>FREE · TAKES 30 SECONDS · NO ACCOUNT</span>
      </div>
      <h2 className="h-big">
        Why play it <span className="it">safe?</span>
      </h2>
      <a href="#tryon" className="cta-primary" style={{ display: 'inline-flex' }}>
        Upload my photo →
      </a>
      <div className="mono" style={{ marginTop: 24, color: 'var(--ink-mute)' }}>
        312 MEN TRANSFORMING RIGHT NOW
      </div>
    </section>
  );
}

function App() {
  return (
    <div>
      <div className="hero">
        <HeroLeft/>
        <HeroRight/>
      </div>
      <HowItWorks/>
      <Stats/>
      <UGCSection/>
      <FinalCTA/>
    </div>
  );
}

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