/* eslint-disable */
const { useState: useStateW, useEffect: useEffectW, useRef: useRefW } = React;

const PASS_THEMES = [
  { id: "ember",   name: "Ember",    grad: "linear-gradient(135deg, #EE5A24 0%, #B6391A 100%)" },
  { id: "ink",     name: "Ink",      grad: "linear-gradient(135deg, #1F3454 0%, #0A1628 100%)" },
  { id: "violet",  name: "Violet",   grad: "linear-gradient(135deg, #7C5CFF 0%, #3B2A99 100%)" },
  { id: "cyan",    name: "Cyan",     grad: "linear-gradient(135deg, #3FA9F5 0%, #1862A8 100%)" },
  { id: "pink",    name: "Pink",     grad: "linear-gradient(135deg, #EF476F 0%, #9F2241 100%)" },
];

const TIERS = ["General", "VIP", "Speaker"];

function WalletDemo() {
  const [event, setEvent]       = useStateW("DevSummit 2026");
  const [name, setName]         = useStateW("Alex Reyes");
  const [theme, setTheme]       = useStateW("ember");
  const [tier, setTier]         = useStateW("General");
  const [updateText, setUpdate] = useStateW("Keynote moved to Hall North · Doors open 8:30");
  const [pushed, setPushed]     = useStateW(false);
  const [shake, setShake]       = useStateW(false);
  const timeoutRef = useRefW(null);

  const themeObj = PASS_THEMES.find(t => t.id === theme);

  function pushUpdate() {
    setPushed(false);
    setShake(false);
    requestAnimationFrame(() => {
      setPushed(true);
      setShake(true);
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
      timeoutRef.current = setTimeout(() => setShake(false), 600);
    });
  }

  useEffectW(() => () => timeoutRef.current && clearTimeout(timeoutRef.current), []);

  const initial = (event || "X").trim().charAt(0).toUpperCase();

  return (
    <section className="block peach" id="wallet-demo" data-screen-label="05 Wallet demo">
      <div className="sec-head">
        <div className="row">
          <div>
            <div className="sec-num">04 — Try it</div>
            <h2 className="sec-title">A live <span className="em">demo pass</span> — design it in 30 seconds.</h2>
          </div>
          <p className="sec-sub">This is a real digital pass mockup. Edit the brand, tier and theme — then push a live update to it, just like we do mid-event.</p>
        </div>
      </div>

      <div className="demo-wp-grid">
        <div className="demo-wp-controls">
          <div className="ctrl-row">
            <span className="lbl">Event name</span>
            <input type="text" value={event} onChange={e => setEvent(e.target.value)} maxLength={32}/>
          </div>
          <div className="ctrl-row">
            <span className="lbl">Attendee</span>
            <input type="text" value={name} onChange={e => setName(e.target.value)} maxLength={28}/>
          </div>
          <div className="ctrl-row">
            <span className="lbl">Tier</span>
            <div className="seg">
              {TIERS.map(t => (
                <button key={t} className={tier === t ? "active" : ""} onClick={() => setTier(t)}>{t}</button>
              ))}
            </div>
          </div>
          <div className="ctrl-row">
            <span className="lbl">Pass theme</span>
            <div className="swatches">
              {PASS_THEMES.map(t => (
                <button
                  key={t.id}
                  className={"swatch" + (theme === t.id ? " active" : "")}
                  style={{background: t.grad}}
                  onClick={() => setTheme(t.id)}
                  aria-label={t.name}
                />
              ))}
            </div>
          </div>
          <div className="demo-wp-update">
            <div className="du-label">Push a live update</div>
            <textarea value={updateText} onChange={e => setUpdate(e.target.value)} maxLength={120} placeholder="e.g. Lounge access opens at 4pm"/>
            <div className="du-row">
              <span className="du-tip">Delivers in &lt; 2s · {120 - updateText.length} chars left</span>
              <button className="btn btn-primary" onClick={pushUpdate}>Push update</button>
            </div>
          </div>
        </div>

        <div className="demo-wp-stage">
          <div className="demo-phone">
            <div className="demo-phone-screen">
              <div className="dp-notch"></div>
              <div className="dp-bar">
                <span>9:41</span>
                <span style={{display:"flex",gap:5,alignItems:"center"}}>
                  <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>
                  <span style={{fontSize:11,fontWeight:600}}>100</span>
                </span>
              </div>
              <div className="dp-app-head">
                <span className="h-l">Pass</span>
                <span className="h-r">+</span>
              </div>

              <div className={"demo-pass" + (shake ? " shake" : "")} style={{background: themeObj.grad}}>
                <div className="dp-top">
                  <div className="dp-brand-block">
                    <div className="dp-eb">XTAG STUDIO · DEMO</div>
                    <div className="dp-name">{event || "Your event"}</div>
                  </div>
                  <div className="dp-logo">{initial}</div>
                </div>
                <div className="dp-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">{tier}</div></div>
                  <div><div className="lbl">Seat</div><div className="val">Open · GA</div></div>
                </div>
                <div className="dp-bottom">
                  <div className="dp-attendee">{name || "Attendee name"}</div>
                  <svg className="dp-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={"demo-update-banner" + (pushed ? " show" : "")}>
                <div className="bnr-dot"></div>
                <div>
                  <div className="bnr-title">{event} · Live update</div>
                  <div className="bnr-body">{updateText || "Your update will appear here."}</div>
                </div>
              </div>

              <button className="demo-fab" onClick={pushUpdate}>
                <span className="fab-dot"></span>
                Push update
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.WalletDemo = WalletDemo;