/* eslint-disable */
function CaseStudyVisual({ type }) {
  const [reelOpen, setReelOpen] = React.useState(false);
  if (type === "tickets") {
    return (
      <div className="case-visual case-visual-ticket-screens" aria-label="SwitchPlay ticket landing and registration screens">
        <img
          className="case-ticket-ref case-ticket-landing-ref"
          src="assets/case-studies/switchplay-ticket-landing-reference.png"
          alt="SwitchPlay Dance landing page"
        />
        <img
          className="case-ticket-ref case-ticket-register-ref"
          src="assets/case-studies/switchplay-ticket-register-reference.png"
          alt="SwitchPlay Dance registration and order page"
        />
        <div className="case-visual-caption">Landing page + registration checkout</div>
      </div>
    );
  }

  if (type === "switchplay-passport") {
    return (
      <div className="case-visual case-visual-switchplay-ops" aria-label="SwitchPlay admin activity and passport screens">
        <img
          className="case-sp-admin"
          src="assets/case-studies/switchplay-admin-activity-reference.png"
          alt="SwitchPlay admin stamp activity chart"
        />
        <img
          className="case-sp-passport-small"
          src="assets/case-studies/switchplay-passport-mobile-real.png"
          alt="SwitchPlay completed booth passport grid"
        />
        <div
          className={"case-sp-video" + (reelOpen ? " is-expanded" : "")}
          onClick={() => {
            if (!reelOpen) {
              setReelOpen(true);
            }
          }}
        >
          <button
            type="button"
            className="case-sp-video-hint"
            aria-label={reelOpen ? "Shrink SwitchPlay event reel" : "Expand SwitchPlay event reel"}
            aria-pressed={reelOpen}
            onClick={(event) => {
              event.stopPropagation();
              setReelOpen((open) => !open);
            }}
          >
            {reelOpen ? "Shrink" : "Expand"}
          </button>
          <InstagramEmbed url="https://www.instagram.com/p/DX8xKZjTDi3/" />
        </div>
      </div>
    );
  }

  if (type === "electric-run") {
    return (
      <div className="case-visual case-visual-electric-run" aria-label="Colorfest Electric Night Run landing page, race kit and sponsor assets">
        <img
          className="case-electric-bg"
          src="assets/case-studies/electric-night-run/wide-banner.jpg"
          alt=""
          aria-hidden="true"
        />
        <div className="case-electric-scrim"></div>
        <img
          className="case-electric-logo"
          src="assets/case-studies/electric-night-run/colorfest-electric-night-run-full.webp"
          alt="Colorfest Electric Night Run"
        />
        <img
          className="case-electric-page"
          src="assets/case-studies/electric-night-run/landing-reference.jpg"
          alt="Colorfest Electric Night Run landing and registration page"
        />
        <img
          className="case-electric-kit"
          src="assets/case-studies/electric-night-run/race-kit-premium.webp"
          alt="Colorfest Electric Night Run premium race kit"
        />
        <img
          className="case-electric-sponsors"
          src="assets/case-studies/electric-night-run/sponsor-strip.webp"
          alt="Colorfest Electric Night Run sponsor strip"
        />
        <div className="case-visual-caption">Live site + registration stack</div>
      </div>
    );
  }

  return (
    <div className="case-visual case-visual-gcash-screens" aria-label="GCash event feed, venue map and challenge screens">
      <img
        className="case-gcash-ref case-gcash-feed-ref"
        src="assets/case-studies/gcash-event-feed-reference.png"
        alt="GCash event feed with live activity"
      />
      <img
        className="case-gcash-ref case-gcash-map-ref"
        src="assets/case-studies/gcash-map-reference.png"
        alt="GCash venue map with partner location details"
      />
      <img
        className="case-gcash-ref case-gcash-challenge-ref"
        src="assets/case-studies/gcash-challenge-reference.png"
        alt="GCash challenge detail screen"
      />
    </div>
  );
}

function InstagramEmbed({ url }) {
  React.useEffect(() => {
    const processEmbed = () => {
      if (window.instgrm && window.instgrm.Embeds) {
        window.instgrm.Embeds.process();
      }
    };
    const existing = document.querySelector('script[src="https://www.instagram.com/embed.js"]');
    if (existing) {
      processEmbed();
      return;
    }
    const script = document.createElement("script");
    script.async = true;
    script.src = "https://www.instagram.com/embed.js";
    script.onload = processEmbed;
    document.body.appendChild(script);
  }, [url]);

  return (
    <blockquote
      className="instagram-media"
      data-instgrm-permalink={url}
      data-instgrm-version="14"
      style={{
        background: "#fff",
        border: 0,
        borderRadius: 12,
        boxShadow: "none",
        margin: 0,
        minWidth: 0,
        padding: 0,
        width: "100%",
      }}
    >
      <a href={url}>View this post on Instagram</a>
    </blockquote>
  );
}

function CaseStrip() {
  const cases = [
    {
      visual: "electric-run",
      eyebrow: "Colorfest Electric Night Run",
      title: "A launch-ready race site with registration, checkout and admin layers.",
      body: "The Electric Night Run build paired a neon event landing page with distance selection, kit options, runner registration, PayMongo checkout, confirmation flows, admin reporting and analytics tracking.",
      chips: ["Landing page", "Runner registration", "PayMongo checkout", "Admin dashboard"],
      result: "Launch layer: publish the campaign and capture paid registrations.",
      href: "https://electric-night-run.vercel.app/",
      hrefLabel: "Open live build",
    },
    {
      visual: "tickets",
      eyebrow: "SwitchPlay Dance Tickets",
      title: "A ticket landing page and registration funnel for paid attendance.",
      body: "We built the event landing page, registration form, order summary and PayMongo handoff so interested visitors could claim a spot and complete payment.",
      chips: ["Landing page", "Registration form", "Order summary", "PayMongo handoff"],
      result: "Before the event: turn interest into confirmed attendance.",
    },
    {
      visual: "switchplay-passport",
      eyebrow: "SwitchPlay Dance Ops",
      title: "A live activity console for stamps, visitors and prize operations.",
      body: "The admin side gave staff a view of stamp activity throughout the event, while attendees used the passport grid to scan booths and track completion.",
      chips: ["Stamp activity", "Admin console", "Sponsor booths", "Prize ops"],
      result: "During the event: turn booth visits into measurable engagement.",
    },
    {
      visual: "gcash",
      eyebrow: "GCash Suroy Siargao",
      title: "An island-wide challenge app for venues, receipts and rewards.",
      body: "The GCash build coordinated challenge cards, venue maps, QR scans, receipt uploads, remote approvals, live feed posts, event wall content and admin operations.",
      chips: ["Challenge cards", "Venue maps", "Receipt review", "Event feed"],
      result: "Across locations: operate the campaign while it is live.",
    },
  ];
  const layers = [
    "Conversion funnel",
    "Digital passport",
    "Sponsor activation",
    "Runner registration",
    "Payment checkout",
    "Live control room",
    "Receipt review",
    "Analytics tracking",
  ];
  return (
    <section className="block dark case-studies" id="proof" data-screen-label="05 Proof">
      <div className="sec-head proof-head">
        <div className="row proof-row">
          <div className="proof-kicker">
            <div className="sec-num on-dark">05 - Proof XTAG can ship</div>
            <p className="sec-sub on-dark">The names and screenshots below should stay review-only unless each client approves public use.</p>
          </div>
          <h2 className="sec-title" style={{color:"#fff"}}>These are the same layers ToyCon needs, already proven in <span className="em on-dark">real builds.</span></h2>
        </div>
      </div>

      <div className="case-grid">
        {cases.map(item => (
          <article key={item.eyebrow} className={"case-card case-card-" + item.visual}>
            <CaseStudyVisual type={item.visual} />
            <div className="case-card-body">
              <div className="case-eyebrow">{item.eyebrow}</div>
              <h3>{item.title}</h3>
              <p>{item.body}</p>
              <div className="case-chip-row">
                {item.chips.map(chip => <span key={chip}>{chip}</span>)}
              </div>
              <div className="case-result">{item.result}</div>
              {item.href && (
                <a className="case-link" href={item.href} target="_blank" rel="noreferrer">
                  {item.hrefLabel}
                </a>
              )}
            </div>
          </article>
        ))}
      </div>

      <div className="case-ops-band">
        <div>
          <div className="case-eyebrow">What this proves</div>
          <h3>XTAG builds the layers around the live event moment.</h3>
        </div>
        <div className="case-layer-grid">
          {layers.map(l => (
            <span key={l}>{l}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const tiers = [
    {
      name: "STARTER PASS", forSize: "For events with 500–2,500 attendees",
      amt: "$15K", small: "+ $0.20 / pass · setup", popular: false,
      incl: ["QR digital-pass deployment","Connector to your registration platform","Branded pass design","Live event support"],
      cta: "Get a quote",
    },
    {
      name: "STUDIO ENGAGEMENT", forSize: "For events with 2,500–10,000 attendees",
      amt: "$45K", small: "fixed-bid · most popular", popular: true,
      incl: ["Everything in Starter","Sponsor Activation Suite (up to 25 sponsors)","Custom registration microsite","Post-event analytics dashboard","24/7 remote NOC during event"],
      cta: "Get a quote",
    },
    {
      name: "ENTERPRISE BUILD", forSize: "For events with 10,000+ attendees",
      amt: "$85K", small: "scoped in 48 hours", popular: false,
      incl: ["Everything in Studio","Custom platform integrations","Native iOS + Android event app","Bilingual (EN / ES) support","Multi-event annual contract"],
      cta: "Talk to us",
    },
  ];
  return (
    <section className="block" id="pricing" data-screen-label="07 Pricing">
      <div className="sec-head">
        <div className="row">
          <div>
            <div className="sec-num">07 — Pricing</div>
            <h2 className="sec-title">Real prices. <span className="em">Listed upfront.</span></h2>
          </div>
          <p className="sec-sub">No hidden per-registrant fees. No "Phase 2." Fixed-bid means fixed.</p>
        </div>
      </div>
      <div className="price-grid">
        {tiers.map(t => (
          <div key={t.name} className={"price-card" + (t.popular ? " popular" : "")}>
            {t.popular && <div className="price-flag">Most popular</div>}
            <span className="pc-name">{t.name}</span>
            <span className="pc-for">{t.forSize}</span>
            <div className="pc-amount">From {t.amt}<span className="small">{t.small}</span></div>
            <ul className="pc-incl">
              {t.incl.map(i => <li key={i}>{i}</li>)}
            </ul>
            <div className="pc-cta">
              <button className={"btn " + (t.popular ? "btn-primary" : "btn-ghost-orange")} style={{width:"100%"}}>{t.cta}</button>
            </div>
          </div>
        ))}
      </div>
      <p className="price-foot">No hidden per-registrant fees. No "Phase 2." Fixed-bid means fixed.</p>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="final-cta" id="cta" data-screen-label="08 Final CTA">
      <div className="fc-eyebrow">Let's build your next event together</div>
      <h2>Partner with us<br/>on your next event.</h2>
      <p className="fc-sub">Tell us when, where and how big — we'll be your event-tech partner from scope to showtime.</p>
      <div className="fc-cluster">
        <button className="btn btn-on-orange btn-lg" style={{padding:"18px 36px",fontSize:15,letterSpacing:".06em",textTransform:"uppercase"}}>Start a conversation</button>
        <div className="secondary">Or email <a href="mailto:hello@xtagstudio.com">hello@xtagstudio.com</a></div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    { h: "Services",   links: ["Digital Passports","Sponsor Activation","Custom Event Tech","Onsite Backed by XTAG"] },
    { h: "Industries", links: ["Tech Conferences","Music Festivals","Corporate Kickoffs","Trade Shows","Sports Events"] },
    { h: "Company",    links: ["About","Team","Case Studies","Press","Contact"] },
    { h: "Legal",      links: ["Privacy","Terms","SOC 2","Data Processing"] },
  ];
  return (
    <footer className="footer" data-screen-label="09 Footer">
      <div className="foot-top">
        <div className="brand-blk">
          <div className="brand">
            <svg width="28" height="28" 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>
          </div>
          <p className="tagline">Modern, responsive event apps built for real attendee engagement. Market-quality design, backed by XTAG. Manila → USA.</p>
        </div>
        <div className="foot-cta">
          <button className="btn btn-primary">Book a 20-min call</button>
          <button className="btn btn-ghost-orange-dark">Email us</button>
        </div>
      </div>
      <div className="foot-cols">
        {cols.map(c => (
          <div key={c.h}>
            <div className="col-h">{c.h}</div>
            {c.links.map(l => <a key={l} href="#">{l}</a>)}
          </div>
        ))}
      </div>
      <div className="foot-bottom">
        <span>© 2026 XTAG Studio · Manila + Miami · A part of XTAG</span>
        <div className="links">
          <a href="#">LinkedIn</a>
          <a href="#">Twitter</a>
          <a href="#">GitHub</a>
        </div>
      </div>
    </footer>
  );
}

window.CaseStrip = CaseStrip;
window.Pricing   = Pricing;
window.FinalCTA  = FinalCTA;
window.Footer    = Footer;