/* eslint-disable */
const { useState: useStateHero } = React;

function Nav() {
  const links = [
    { lbl: "Approach",     href: "#problem" },
    { lbl: "Case studies", href: "#proof"   },
    { lbl: "Contact",      href: "#cta"     },
  ];
  return (
    <nav className="xtag-nav">
      <a href="#top" className="brand" style={{textDecoration:"none"}}>
        <svg width="24" height="24" viewBox="0 0 32 32">
          <path d="M6 6 L18 18" stroke="#EE5A24" strokeWidth="3" strokeLinecap="round"/>
          <path d="M22 6 L26 10" stroke="#EE5A24" strokeWidth="3" strokeLinecap="round"/>
          <path d="M6 22 L10 26" stroke="#fff" strokeWidth="3" strokeLinecap="round"/>
          <path d="M22 22 L14 14" stroke="#fff" strokeWidth="3" strokeLinecap="round"/>
        </svg>
        <span>XTAG Studio</span>
      </a>
      <div className="links">
        {links.map(l => (
          <a key={l.lbl} href={l.href}>{l.lbl}</a>
        ))}
      </div>
      <a href="#cta" className="btn btn-primary" style={{textDecoration:"none"}}>Start a conversation</a>
    </nav>
  );
}

function Hero() {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="hero-grid">
        <div className="hero-copy">
          <span className="eyebrow">Philippines-based · AI-augmented · Event-tech specialized</span>
          <h1>
            Event tech that ships in <span className="hl">weeks
              <svg className="squiggle" viewBox="0 0 200 12" preserveAspectRatio="none"><path d="M2 8 Q60 -2 120 4 T 198 6" stroke="#EE5A24" strokeWidth="3" strokeLinecap="round" fill="none"/></svg>
            </span>, not quarters — at 30% of US agency cost.
          </h1>
          <p className="lede">We build the digital passes, sponsor activations and custom integrations that legacy event platforms don't — for conferences from 500 to 25,000 attendees.</p>
          <div className="cta-cluster">
            <button className="btn btn-primary btn-lg">Get a project quote in 24 hours</button>
            <button className="btn btn-text-light">See live case studies <span className="arrow">→</span></button>
          </div>
        </div>
        <HeroVisual />
      </div>
      <div className="trust-strip">
        <span><span className="dot"></span>Backed by XTAG</span>
        <span><span className="dot"></span>320 attendees/hour onsite</span>
        <span><span className="dot"></span>SOC 2 in progress</span>
        <span><span className="dot"></span>Manila → USA</span>
      </div>
    </section>
  );
}

function HeroVisual() {
  return (
    <div className="hero-visual" aria-hidden="true">
      <div className="phone">
        <div className="phone-screen">
          <div className="phone-notch"></div>
          <div className="phone-time">9:41</div>
          <div className="phone-icons">
            <svg width="14" height="10" viewBox="0 0 14 10" fill="currentColor"><rect x="0" y="6" width="2" height="4" rx="1"/><rect x="3" y="4" width="2" height="6" rx="1"/><rect x="6" y="2" width="2" height="8" rx="1"/><rect x="9" y="0" width="2" height="10" rx="1"/></svg>
            <svg width="14" height="10" viewBox="0 0 14 10" fill="currentColor"><path d="M7 1.5C4 1.5 1.5 4 1.5 7L7 1.5z" opacity=".5"/><path d="M7 3.5c1.5 0 2.5 1 2.5 2.5L7 3.5z" opacity=".7"/><circle cx="7" cy="8" r="1"/></svg>
            <span style={{fontSize: 11, fontWeight: 600}}>100</span>
          </div>
          <div className="wallet-pass">
            <div className="wp-top">
              <div>
                <div className="wp-brand">XTAG STUDIO · DEMO</div>
                <div className="wp-name">DevSummit 2026</div>
              </div>
              <div className="wp-logo">D</div>
            </div>
            <div className="wp-meta">
              <div><div className="lbl">When</div><div className="val">Mar 14 · 9:00</div></div>
              <div><div className="lbl">Gate</div><div className="val">North · A4</div></div>
              <div><div className="lbl">Tier</div><div className="val">All-Access</div></div>
              <div><div className="lbl">Seat</div><div className="val">Open · GA</div></div>
            </div>
            <div className="wp-bar">
              <div className="wp-attendee">Alex Reyes</div>
              <svg className="wp-qr" viewBox="0 0 30 30">
                <rect width="30" height="30" fill="#fff"/>
                <g fill="#0A1628">
                  <rect x="2" y="2" width="8" height="8"/><rect x="4" y="4" width="4" height="4" fill="#fff"/>
                  <rect x="20" y="2" width="8" height="8"/><rect x="22" y="4" width="4" height="4" fill="#fff"/>
                  <rect x="2" y="20" width="8" height="8"/><rect x="4" y="22" width="4" height="4" fill="#fff"/>
                  <rect x="13" y="2" width="2" height="2"/><rect x="16" y="5" width="2" height="2"/><rect x="12" y="8" width="2" height="2"/>
                  <rect x="14" y="13" width="2" height="2"/><rect x="18" y="13" width="2" height="2"/><rect x="22" y="14" width="2" height="2"/>
                  <rect x="13" y="18" width="2" height="2"/><rect x="17" y="20" width="2" height="2"/><rect x="20" y="22" width="2" height="2"/><rect x="24" y="20" width="2" height="2"/>
                  <rect x="14" y="24" width="2" height="2"/><rect x="18" y="24" width="2" height="2"/><rect x="22" y="26" width="2" height="2"/>
                </g>
              </svg>
            </div>
          </div>
          <div className="phone-update">
            <div className="pu-dot"></div>
            <div>
              <div className="pu-title">Gate change · Keynote</div>
              <div className="pu-body">Moved to Hall North · Doors open 8:30. Pass updated.</div>
            </div>
          </div>
        </div>
      </div>

      <div className="kiosk">
        <div className="kiosk-bar">
          <div className="k-brand">
            <svg width="14" height="14" viewBox="0 0 32 32">
              <path d="M6 6 L18 18" stroke="#EE5A24" strokeWidth="3" strokeLinecap="round"/>
              <path d="M22 6 L26 10" stroke="#EE5A24" strokeWidth="3" strokeLinecap="round"/>
              <path d="M6 22 L10 26" stroke="#fff" strokeWidth="3" strokeLinecap="round"/>
              <path d="M22 22 L14 14" stroke="#fff" strokeWidth="3" strokeLinecap="round"/>
            </svg>
            <span>Check-in</span>
          </div>
          <div className="k-status">Live</div>
        </div>
        <div className="kiosk-body">
          <div className="k-eyebrow">DevSummit 2026 · North Hall</div>
          <div className="k-h">Tap your pass</div>
          <div className="k-tap">
            <div className="k-tap-icon">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.55a11 11 0 0 1 14 0"/><path d="M8.5 16.43a6 6 0 0 1 7 0"/><path d="M12 20h.01"/><path d="M2 8.82a15 15 0 0 1 20 0"/></svg>
            </div>
          </div>
          <div className="k-name">Alex Reyes</div>
          <div className="k-sub">All-Access · Verified ✓</div>
          <div className="k-counter">
            <div>
              <div style={{fontFamily:"var(--mono)", fontSize:9, letterSpacing:".14em", textTransform:"uppercase", color:"var(--fg-3)"}}>This hour</div>
              <div style={{fontFamily:"var(--display)", fontWeight:700, fontSize:18, color:"var(--ink-900)", marginTop:2}}>312<span style={{fontSize:11, color:"var(--fg-3)", fontWeight:500}}>/hr</span></div>
            </div>
            <div style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:".14em", textTransform:"uppercase", color:"#18a957"}}>+18%</div>
          </div>
        </div>
      </div>

      <div className="dash-strip">
        <div className="ds-cell">
          <div className="lbl">Passes issued</div>
          <div className="val">12,847</div>
          <div className="delta">+412 this hour</div>
        </div>
        <div className="ds-cell">
          <div className="lbl">Check-ins/hr</div>
          <div className="val">312</div>
          <div className="delta">peak 327 / kiosk</div>
        </div>
        <div className="ds-cell">
          <div className="lbl">Sponsor leads</div>
          <div className="val">4,201</div>
          <div className="delta">+86 last 5 min</div>
        </div>
      </div>
    </div>
  );
}

window.Nav = Nav;
window.Hero = Hero;