function Home(){
  const { go } = useRoute();
  const { tweaks } = useTweaks();

  return (
    <>
      <Marquee items={[
        "CUSTOM EVENTS NEAR & FAR ♠",
        "TACOS N' TEQUILA 5/5/26 ♥",
        "CUSTOM EVENTS NEAR & FAR ♠",
      ]} />

      {/* HERO — variants */}
      <section className="container">
        {tweaks.heroVariant === 'stacked' && (
          <div className="hero">
            <div className="hero-top">
              <span className="eyebrow">Vol. 01 · Est. 2026 · Dallas, TX</span>
              <span className="eyebrow">Custom events near &amp; far <span style={{color:'var(--accent)'}}>♠</span></span>
            </div>
            <h1 className="hero-stack">
              <span className="line red">custom</span>
              <span className="line italic">events</span>
              <span className="line">near <span style={{fontStyle:'italic', color:'var(--accent)'}}>&amp;</span> far.</span>
            </h1>
            <div className="hero-meta">
              <div className="cell">
                <div className="label">Now booking</div>
                <div className="value">Summer &amp; Fall 2026</div>
              </div>
              <div className="cell">
                <div className="label">Specialty</div>
                <div className="value">Private, Corporate, Nightlife</div>
              </div>
              <div className="cell">
                <div className="label">Based in</div>
                <div className="value">Dallas / Fort Worth</div>
              </div>
              <div className="cell">
                <div className="label">Inquire</div>
                <div className="value"><a href="#inquiry" onClick={(e)=>{e.preventDefault(); go('inquiry');}} style={{color:'var(--accent)'}}>@___byace →</a></div>
              </div>
            </div>
          </div>
        )}

        {tweaks.heroVariant === 'asym' && (
          <div className="hero asym">
            <h1 className="hero-stack">
              <span className="line italic red">custom</span>
              <span className="line">events</span>
              <span className="line italic">near</span>
              <span className="line red">&amp; far.</span>
            </h1>
            <div className="side">
              <span className="eyebrow">001 — Home <span style={{color:'var(--accent)'}}>♥</span></span>
              <p>byace throws <span style={{color:'var(--accent)'}}>custom events near &amp; far</span> — dinners, brand nights, pop-ups, concerts, private parties. if you can picture it, we can probably pull it off.</p>
              <a href="#inquiry" className="cta-link" onClick={(e)=>{e.preventDefault(); go('inquiry');}}>Start an inquiry <span className="arw">→</span></a>
            </div>
          </div>
        )}

        {tweaks.heroVariant === 'ticker' && (
          <div className="hero ticker" style={{marginLeft:-40, marginRight:-40}}>
            <div className="ticker-row red"><span className="num">01</span> custom.<span className="tag">♥ near</span></div>
            <div className="ticker-row italic"><span className="num">02</span> events.<span className="tag">private</span></div>
            <div className="ticker-row red"><span className="num">03</span> near.<span className="tag">dallas · ftw</span></div>
            <div className="ticker-row italic"><span className="num">04</span> &amp; far.<span className="tag">on request</span></div>
            <div className="ticker-row red"><span className="num">05</span> by ace. <span className="tag">♠</span></div>
          </div>
        )}
      </section>

      {/* UPCOMING EVENTS */}
      <section className="container" style={{padding:'100px 0 80px'}}>
        <div className="featured-head">
          <h2><span style={{color:'var(--accent)', fontStyle:'italic'}}>Upcoming events</span></h2>
          <span className="eyebrow">Next up</span>
        </div>

        <article className="event-card">
          <div className="event-card-left">
            <div className="event-date-block">
              <span className="event-date-day">05</span>
              <span className="event-date-mo">may · 2026</span>
            </div>
            <span className="eyebrow" style={{color:'var(--accent)'}}>♥ Cinco de Mayo</span>
          </div>

          <div className="event-card-mid">
            <div className="event-headline">
              <span className="eh-red">tacos n' tequila</span>
              <span className="eh-white">by ace</span>
            </div>
            <div className="event-sub">with <span style={{color:'var(--accent)'}}>dj pauly p</span></div>

            <div className="event-meta-grid">
              <div className="emg">
                <div className="emg-lbl">When</div>
                <div className="emg-val">7 PM · Cinco de Mayo</div>
              </div>
              <div className="emg">
                <div className="emg-lbl">Where</div>
                <div className="emg-val">Twelve Cowboys Way<br/>Frisco, Texas</div>
              </div>
              <div className="emg">
                <div className="emg-lbl">Ticket</div>
                <div className="emg-val"><span style={{color:'var(--accent)'}}>$50</span> / person<br/><span style={{opacity:0.7, fontSize:16}}>dinner + three drinks</span></div>
              </div>
              <div className="emg">
                <div className="emg-lbl">Reserve</div>
                <div className="emg-val">Venmo <span style={{color:'var(--accent)'}}>@byace</span></div>
              </div>
            </div>

            <ul className="event-notes">
              <li><span style={{color:'var(--accent)'}}>♥</span> vegan / vegetarian options provided</li>
              <li><span style={{color:'var(--accent)'}}>♠</span> beer + wine available</li>
              <li><span style={{color:'var(--accent)'}}>♥</span> ticket sales end 5.4</li>
            </ul>
          </div>

          <div className="event-card-right">
            <span className="event-hearts">♥</span>
          </div>
        </article>
      </section>

      <Marquee alt items={[
        "CUSTOM EVENTS NEAR & FAR ♠",
        "TACOS N' TEQUILA 5/5/26 ♥",
        "CUSTOM EVENTS NEAR & FAR ♠",
      ]} />
    </>
  );
}
window.Home = Home;