/* eslint-disable */
const { useState: useStateP, useRef: useRefP } = React;

function DollarRating({ filled, label }) {
  return (
    <div className="pc-cost" aria-label={`${label}: ${filled} out of 5 cost`}>
      <span className="pc-cost-label">Typical cost</span>
      <span className="pc-cost-dots" aria-hidden="true">
        {[0,1,2,3,4].map(i => (
          <span key={i} className={"dollar " + (i < filled ? "on" : "off")}>$</span>
        ))}
      </span>
    </div>
  );
}

function ProblemAndOffer() {
  const advantages = [
    { num: "01", tag: "GAMIFICATION",     title: "Turn every booth into a game.",        body: "Points, badges, leaderboards and prize tiers replace the passive lanyard-walk with a competitive scavenger hunt. Booths get scanned more, attendees stay later, and sponsors get the spotlight they actually paid for.",                stat: "3.4× more booth visits" },
    { num: "02", tag: "LIVE INTERACTION", title: "Push, personalize, react in real time.", body: "Live agenda updates, personalized session recommendations, AI-matched networking intros and push notifications keep attention compounding from opening keynote to after-party. The app is the event in their pocket — not just a ticket.", stat: "47% higher session attendance" },
    { num: "03", tag: "MEASURABLE ROI",   title: "Every interaction is measurable data.", body: "Static badges give you a headcount. A digital passport gives you booth dwell time, qualified leads per sponsor, session conversion and pipeline value — the kind of data your sponsors will renew at 1.5× rates to keep getting.",            stat: "92% sponsor renewal" },
  ];

  const passportIcon     = (<g><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M9 8h6M9 12h6M9 16h3"/></g>);
  const sponsorIcon      = (<g><path d="M4 7l8-4 8 4-8 4z"/><path d="M4 12l8 4 8-4M4 17l8 4 8-4"/></g>);
  const customIcon       = (<g><path d="M4 6h16M4 12h16M4 18h10"/><circle cx="18" cy="18" r="2.5"/></g>);
  const registrationIcon = (<g><path d="M4 7h12M4 12h12M4 17h8"/><circle cx="19" cy="17" r="2.5"/><path d="M19 7v6"/></g>);

  return (
    <section className="block" id="problem" data-screen-label="01 Why digital passports">
      <div className="sec-head">
        <div className="row">
          <div>
            <div className="sec-num">01 — Why digital passports</div>
            <h2 className="sec-title">Static badges are dead. Live event apps own the <span className="em">floor</span>.</h2>
          </div>
          <p className="sec-sub">Gamification, real-time interaction and measurable sponsor ROI — three reasons interactive event apps are how modern events engage attendees and grow revenue year over year.</p>
        </div>
      </div>

      <div className="gap-grid">
        {advantages.map(a => (
          <div className="problem-card" key={a.num}>
            <div className="pc-tag"><span className="num">{a.num}</span> {a.tag}</div>
            <h4>{a.title}</h4>
            <p>{a.body}</p>
            <div className="pc-stat">{a.stat}</div>
          </div>
        ))}

        <div className="gap-divider"><span>How we ship it</span></div>

        <div className="product-card featured">
          <div className="pc-flag">Headline offer</div>
          <div className="pc-head">
            <div className="ico bg-blue"><svg width="22" height="22" viewBox="0 0 24 24" className="icon-stroke">{passportIcon}</svg></div>
            <span className="pc-eyebrow">Digital Passports</span>
          </div>
          <h3>QR-based digital passes, deployed in under 14 days.</h3>
          <p className="pc-body">Pre-tested connectors from any major registration platform — full-bleed branded pass art, scan-to-enter QR, push notifications. The interactive web app every attendee carries.</p>
          <ul className="pc-list">
            <li>Pre-built connectors to your registration platform</li>
            <li>Full-bleed branded pass design</li>
            <li>Scan-to-enter QR at every gate</li>
            <li>Live updates — gates, weather, room changes</li>
            <li>SMS, email or QR claim delivery</li>
            <li>Post-event sponsor coupons + follow-up assets</li>
          </ul>
          <div className="pc-cta">
            <a href="#cta" className="btn-text-light" style={{textDecoration:"none"}}>Talk to us about a digital pass <span className="arrow">→</span></a>
          </div>
        </div>

        <div className="product-card">
          <div className="pc-head">
            <div className="ico bg-violet"><svg width="22" height="22" viewBox="0 0 24 24" className="icon-stroke">{sponsorIcon}</svg></div>
            <span className="pc-eyebrow">Sponsor Activation Suite</span>
          </div>
          <h3>Sponsorships your sponsors will actually renew.</h3>
          <p className="pc-body">Per-sponsor experiences with measurable outcomes — digital coupons, lead-scoring, gamified leaderboards and ROI dashboards. The data layer that turns sponsorships into renewals you can charge more for next year.</p>
          <ul className="pc-list">
            <li>Branded sponsor microsite per booth</li>
            <li>QR coupons redeemable on-floor</li>
            <li>Real-time lead capture with qualification</li>
            <li>Post-event ROI dashboard per sponsor</li>
            <li>Logo placement, attention time, lead quality</li>
          </ul>
          <div className="pc-cta">
            <a href="#cta" className="btn-text-dark" style={{textDecoration:"none"}}>Talk to our team <span className="arrow">→</span></a>
          </div>
        </div>

        <div className="product-card">
          <div className="pc-head">
            <div className="ico bg-orange"><svg width="22" height="22" viewBox="0 0 24 24" className="icon-stroke">{customIcon}</svg></div>
            <span className="pc-eyebrow">Custom Event Tech</span>
          </div>
          <h3>Built like an agency, priced like a partner.</h3>
          <p className="pc-body">Bespoke event tech, sized to your stack and your event. CRM syncs, bilingual registration flows, on-floor kiosk software, post-event analytics — scoped tight, fixed-bid, shipped in 6–10 weeks where US boutiques take 3–4 months.</p>
          <ul className="pc-list">
            <li>Connectors to any major registration platform</li>
            <li>Custom microsites and registration flows</li>
            <li>Mobile event apps</li>
            <li>Post-event analytics dashboards</li>
            <li>24/7 remote NOC during your live event</li>
          </ul>
          <div className="pc-cta">
            <a href="#cta" className="btn-text-dark" style={{textDecoration:"none"}}>Get a project quote <span className="arrow">→</span></a>
          </div>
        </div>

        <div className="product-card">
          <div className="pc-head">
            <div className="ico bg-green"><svg width="22" height="22" viewBox="0 0 24 24" className="icon-stroke">{registrationIcon}</svg></div>
            <span className="pc-eyebrow">Registration &amp; ticket sales</span>
          </div>
          <h3>Ticket sales, registration, and on-site check-in from one platform.</h3>
          <p className="pc-body">A full ticket sales and registration layer for events that don't already have one — multi-tier pricing, promo codes, payment, verification, and QR-based gate check-in. The same record that sells the ticket verifies the attendee at the door, with refunds, transfers, and revenue reporting from one console.</p>
          <ul className="pc-list">
            <li>Multi-tier pricing — GA, VIP, day pass, group bulk</li>
            <li>Promo codes, early-bird windows, and limited drops</li>
            <li>Payment handoff to local processors (PayMongo, GCash, cards)</li>
            <li>Email and SMS verification with OTP resend</li>
            <li>Branded ticket and digital pass delivered on success</li>
            <li>QR check-in app for gate staff with live audit log</li>
            <li>Live sales, attendance, and revenue dashboards</li>
          </ul>
          <div className="pc-cta">
            <a href="#cta" className="btn-text-dark" style={{textDecoration:"none"}}>Get a ticketing build <span className="arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function FanJourney() {
  const [active, setActive] = useStateP(0);
  const trackRef = useRefP(null);
  const journeys = [
    {
      step: "01",
      eyebrow: "Before event",
      title: "Fans claim Digital Passes before the crowd forms.",
      body: "Ticket email, social QR, or the ToyCon site can all launch the same pass flow.",
      metric: "Pass claimed",
      image: "assets/toycon2026/generated/journey/fan-journey-01-before-event.png",
      alt: "Fan claiming a ToyCon digital pass before the event",
    },
    {
      step: "02",
      eyebrow: "Arrival",
      title: "Entry, VIP, and prelude audiences get verified fast.",
      body: "QR verification keeps gates moving without forcing a native app install.",
      metric: "Verified entry",
      image: "assets/toycon2026/generated/journey/fan-journey-02-arrival.png",
      alt: "Fans checking in at a convention gate with a digital pass",
    },
    {
      step: "03",
      eyebrow: "Explore",
      title: "Fans follow quests through booths, stages, and exclusives.",
      body: "Maps, schedules, artist alleys, TCG tables, and sponsor stops stay in one pocket guide.",
      metric: "Guided route",
      image: "assets/toycon2026/generated/journey/fan-journey-03-explore.png",
      alt: "Fan using a phone map to explore a convention floor",
    },
    {
      step: "04",
      eyebrow: "Scan",
      title: "Each QR scan turns a booth visit into sponsor value.",
      body: "Scans collect stamps, queue slots, contest entries, and reward progress from one flow.",
      metric: "Stamp logged",
      image: "assets/toycon2026/generated/journey/fan-journey-04-scan.png",
      alt: "Fan scanning a booth QR code to collect a quest stamp",
    },
    {
      step: "05",
      eyebrow: "Redeem",
      title: "Stamps unlock raffles, fast lanes, vouchers, and rewards.",
      body: "Fans redeem perks on the floor while sponsors see which moments drove action.",
      metric: "Reward claimed",
      image: "assets/toycon2026/generated/journey/fan-journey-05-redeem.png",
      alt: "Fan redeeming a digital reward at a ToyCon prize counter",
    },
    {
      step: "06",
      eyebrow: "Report",
      title: "ToyCon gets a sponsor-ready recap after the floor closes.",
      body: "Visits, claims, queues, hot zones, fan feedback, and renewal proof are ready to package.",
      metric: "Impact report",
      image: "assets/toycon2026/generated/journey/fan-journey-06-report.png",
      alt: "Event organizers reviewing sponsor analytics after a convention",
    },
  ];

  const goTo = (index) => {
    const next = (index + journeys.length) % journeys.length;
    setActive(next);
    const node = trackRef.current && trackRef.current.querySelector(`[data-journey-index="${next}"]`);
    if (node) {
      node.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
    }
  };

  return (
    <section className="block fan-journey" id="journey" data-screen-label="02 Fan Journey">
      <div className="sec-head">
        <div className="row">
          <div>
            <div className="sec-num">02 — Fan journey</div>
            <h2 className="sec-title">Digital Passes turn every fan step into a <span className="em">moment</span>.</h2>
          </div>
          <p className="sec-sub">A realistic phone-poster concept and six image-backed journey cards show how the pass moves fans from claim to recap.</p>
        </div>
      </div>

      <div className="fj-stage">
        <figure className="fj-poster-frame">
          <img
            src="assets/toycon2026/generated/journey/toycon-fan-journey-phone-poster.png"
            alt="Realistic phone poster showing the ToyCon fan journey digital pass experience"
          />
          <figcaption>Phone poster concept · ToyCon fan journey</figcaption>
        </figure>

        <div className="fj-carousel-area">
          <div className="fj-controls" aria-label="Fan journey carousel controls">
            <div>
              <span className="fj-controls-label">Journey cards</span>
              <span className="fj-controls-count">{journeys[active].step} / 06</span>
            </div>
            <div className="fj-control-buttons">
              <button type="button" className="fj-nav-btn" aria-label="Previous journey card" onClick={() => goTo(active - 1)}>‹</button>
              <button type="button" className="fj-nav-btn" aria-label="Next journey card" onClick={() => goTo(active + 1)}>›</button>
            </div>
          </div>

          <div className="fj-viewport" ref={trackRef}>
            <div className="fj-track">
              {journeys.map((item, index) => (
                <article
                  key={item.step}
                  className={"fj-card" + (index === active ? " is-active" : "")}
                  data-journey-index={index}
                  tabIndex="0"
                  onFocus={() => setActive(index)}
                  onMouseEnter={() => setActive(index)}
                >
                  <div className="fj-media">
                    <img src={item.image} alt={item.alt} />
                  </div>
                  <div className="fj-card-body">
                    <div className="fj-card-top">
                      <span className="fj-step">{item.step}</span>
                      <span className="fj-eyebrow">{item.eyebrow}</span>
                    </div>
                    <h3>{item.title}</h3>
                    <p>{item.body}</p>
                    <div className="fj-metric">{item.metric}</div>
                  </div>
                </article>
              ))}
            </div>
          </div>

          <div className="fj-progress" aria-label="Choose fan journey card">
            {journeys.map((item, index) => (
              <button
                key={item.step}
                type="button"
                className={index === active ? "is-active" : ""}
                aria-label={`Show ${item.eyebrow}`}
                aria-pressed={index === active}
                onClick={() => goTo(index)}
              >
                {item.step}
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function _UnusedCompare() {
  const rows = [
    ["Best for",        "<500 attendees, low budget",  ["500–25,000 attendees"],                             "25,000+ enterprise"],
    ["Custom dev",      "None",                         ["Senior engineers + AI"],                            "Senior engineers, US rates"],
    ["Year-1 cost",     "$5K–$15K",                     ["$25K–$120K", " per project"],                       "$100K–$250K + $7–$12/registrant"],
    ["Time to live",    "Same week",                    ["2–10 weeks"],                                       "3–6 months"],
    ["Wallet passes",   "DIY or none",                  ["Native, pre-built"],                                "Custom build at full rates"],
    ["Onsite team",     "None",                         ["Backed by XTAG global team"],                       "In-house"],
  ];
  return (
    <section className="block" id="compare" data-screen-label="04 Compare">
      <div className="sec-head">
        <div className="row">
          <div>
            <div className="sec-num">03 — How we compare</div>
            <h2 className="sec-title">We sit <span className="em">exactly</span> where you need us.</h2>
          </div>
          <p className="sec-sub">Not trying to replace Cvent. Not trying to be Eventbrite. The layer on top that makes your stack feel like 2026.</p>
        </div>
      </div>
      <div className="compare">
        <div className="col-head">
          <span className="ch-label">Comparing</span>
          <span className="ch-name">Six factors</span>
        </div>
        <div className="col-head">
          <span className="ch-label">Low end</span>
          <span className="ch-name">Eventbrite / DIY</span>
        </div>
        <div className="col-head ours">
          <span className="ch-label">XTAG Studio</span>
          <span className="ch-name">The third option</span>
          <span className="ch-tag">You are here</span>
        </div>
        <div className="col-head">
          <span className="ch-label">High end</span>
          <span className="ch-name">Cvent / BW Events</span>
        </div>

        {rows.map((r, i) => (
          <React.Fragment key={r[0]}>
            <div className={"row-label" + (i === rows.length - 1 ? " row-last" : "")}>{r[0]}</div>
            <div className={"cell" + (i === rows.length - 1 ? " row-last" : "")}>{r[1]}</div>
            <div className={"cell ours" + (i === rows.length - 1 ? " row-last" : "")}>
              <strong>{r[2][0]}</strong>{r[2][1] || ""}
            </div>
            <div className={"cell" + (i === rows.length - 1 ? " row-last" : "")}>{r[3]}</div>
          </React.Fragment>
        ))}
      </div>
      <p className="compare-closing">We're not trying to replace Cvent. We're the layer on top of it that makes it actually feel like 2026.</p>
    </section>
  );
}

window.ProblemAndOffer = ProblemAndOffer;
window.Problem = ProblemAndOffer;
window.Products = function ProductsPlaceholder() { return null; };