/* The Consumer Journey — interactive scan→capture flow, phone as product hero */
/* Illustrative concept demo · Not a live SC Athletics offer. */

const BLOCKC = 'assets/sc-block-c.png';

function ConsumerJourney() {
  const FLOW = ['welcome', 'connection', 'sport', 'year', 'location', 'tickets', 'business', 'recruit', 'subscription', 'contact', 'phone', 'unlock'];

  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState({});

  function go(k) { setStep(FLOW.indexOf(k)); }
  function next() { setStep(s => Math.min(FLOW.length - 1, s + 1)); }
  function restart() { setStep(0); setAnswers({}); }

  function pickConnection(label, seg) {
    setAnswers(a => ({ ...a, connection: label, seg }));
    next();
  }
  function pickSport(label) {
    setAnswers(a => ({ ...a, sport: label }));
    if (answers.seg === 'ALUM' || answers.seg === 'STUDENT') next();
    else go('location');
  }
  function submitYear(val) {
    setAnswers(a => ({ ...a, year: val }));
    next();
  }
  function submitZip(zip) {
    setAnswers(a => ({ ...a, zip }));
    next();
  }
  function pickTickets(label) {
    setAnswers(a => ({ ...a, tickets: label }));
    next();
  }
  function pickBusiness(label) {
    setAnswers(a => ({ ...a, business: label }));
    next();
  }
  function pickRecruit(label) {
    setAnswers(a => ({ ...a, recruit: label }));
    next();
  }
  function pickSub(label) {
    setAnswers(a => ({ ...a, subscription: label }));
    next();
  }
  function submitContact(name, email) {
    setAnswers(a => ({ ...a, name, email }));
    next();
  }
  function submitPhone() {
    go('unlock');
  }

  const progress = Math.min(1, step / (FLOW.length - 1));
  const key = FLOW[step];

  return (
    <div>
      {/* Can + phone side by side — the scan, then the journey */}
      <div className="flex flex-col md:flex-row items-center justify-center gap-10 md:gap-14 py-16 md:py-24 max-w-[1100px] mx-auto">
        <div className="relative flex-shrink-0 flex flex-col items-center">
          <div className="absolute inset-0 -m-16 rounded-full halo-breathe" style={{ background: 'radial-gradient(circle, rgba(201,169,97,0.22), rgba(115,0,10,0.14) 45%, transparent 70%)', filter: 'blur(40px)' }} />
          <img src="assets/scan-can.png" alt="South Carolina Scan-the-Can bottle with QR code" className="relative" style={{ width: 460, maxWidth: '82vw', filter: 'drop-shadow(0 36px 50px rgba(0,0,0,0.4))' }} />
          <div className="relative mt-6 text-center">
            <div className="font-mono text-[12px] tracking-[0.22em] uppercase text-garnet">Scan the can</div>
            <div className="font-serif italic text-mute-1 text-[14px] mt-1">→ launches the journey</div>
          </div>
        </div>

        {/* arrow between */}
        <div className="hidden md:flex flex-col items-center text-garnet/50 flex-shrink-0">
          <svg width="56" height="28" viewBox="0 0 56 28" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 14h48M40 6l10 8-10 8" /></svg>
        </div>

        <div className="flex-shrink-0">
          <JourneyPhone flowKey={key} step={step} progress={progress} answers={answers} onRestart={restart}
            handlers={{ pickConnection, pickSport, submitYear, submitZip, pickTickets, pickBusiness, pickRecruit, pickSub, submitContact, submitPhone, go }} />
        </div>
      </div>

      <div className="mt-4 max-w-[1000px] mx-auto">
        <p className="font-serif text-ink text-[22px] md:text-[30px] leading-[1.35]">
          That's <span className="text-garnet">one fan.</span> Every scan captures unique first-party data, so even a fraction of scans builds a database in the <span className="text-garnet">tens of thousands</span> — names, emails, phones, business leads, recruit-family flags, donor intent — flowing directly into South Carolina Athletics. <span className="italic text-ink-2">The water is the trojan horse. The data is the asset.</span>
        </p>
      </div>

      <div className="mt-12 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-5">
        {[
          { icon: 'recruit', h: 'Recruit-pipeline intel', b: 'Every household with a 13–18-year-old prospect surfaces itself — routed straight to recruiting ops.' },
          { icon: 'biz', h: 'Alumni business leads', b: 'Every alum-owned restaurant, hotel, or office routes directly to SC NIL business development for Lane 2.' },
          { icon: 'donor', h: 'Donor & ticketing signals', b: 'Season-ticket-holder, Gamecock-Club, and high-LTV flags feed athletics fundraising and upsell.' },
          { icon: 'list', h: 'A first-party CRM list', b: 'Fully consented, segmented email + SMS — ready for game-day, signing-day, and donation-day campaigns.' },
        ].map((c, i) => (
          <div key={i} className="paper-card p-6">
            <div className="mb-4"><CardIcon kind={c.icon} /></div>
            <div className="display font-semibold text-ink text-[19px] leading-[1.1] mb-2">{c.h}</div>
            <p className="font-serif text-ink-2 text-[14px] leading-[1.55]">{c.b}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- PHONE ---------------- */
function JourneyPhone({ flowKey, step, progress, answers, onRestart, handlers }) {
  return (
    <div className="relative mx-auto overflow-hidden flex flex-col" style={{ width: 420, maxWidth: '90vw', height: 860, maxHeight: '82vh', borderRadius: 52, background: '#0A0A0A', boxShadow: '0 50px 110px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,169,97,0.18)' }}>
      <div className="flex items-center justify-between px-7 pt-6 pb-3 text-paper">
        <span className="font-mono text-[13px]">9:41</span>
        <span className="font-mono text-[10px] tracking-[0.1em] text-paper/70">5G ●●●●</span>
      </div>
      <div className="flex items-center justify-between px-6 pb-3">
        <img src={BLOCKC} alt="SC" style={{ height: 28, filter: 'brightness(0) invert(1)' }} />
        {step > 0 && <button onClick={onRestart} className="font-mono text-[10px] tracking-[0.18em] uppercase text-paper/55 hover:text-garnet transition-colors">↻ Restart</button>}
      </div>
      <div className="px-6">
        <div className="h-[3px] bg-paper/12 rounded-full overflow-hidden">
          <div className="h-full bg-garnet transition-all duration-500" style={{ width: `${progress * 100}%` }} />
        </div>
      </div>
      <div className="flex-1 overflow-hidden px-7 pt-7 pb-8 flex flex-col">
        <Screen flowKey={flowKey} answers={answers} handlers={handlers} />
      </div>
    </div>
  );
}

function Choices({ items }) {
  return (
    <div className="flex flex-col gap-2.5 mt-2 overflow-y-auto no-scrollbar">
      {items.map((it, i) => (
        <button key={i} onClick={it.onClick}
          className="text-left px-5 py-3.5 rounded-xl border border-paper/15 bg-paper/[0.04] text-paper font-sans text-[15px] hover:border-garnet hover:bg-garnet/20 transition-colors">
          {it.label}
        </button>
      ))}
    </div>
  );
}

function ScreenTitle({ children, sub }) {
  return (
    <>
      <div className="display text-paper text-[30px] leading-[1.05] mb-3">{children}</div>
      {sub && <p className="font-serif text-paper/65 text-[14px] leading-[1.45] mb-4">{sub}</p>}
    </>
  );
}

function Screen({ flowKey, answers, handlers }) {
  const h = handlers;

  if (flowKey === 'welcome') return (
    <div className="flex-1 flex flex-col">
      <div className="flex-1 flex flex-col justify-center">
        <div className="display text-paper text-[48px] leading-[0.95]">EVERYBODY<br/>WINS.</div>
        <div className="display text-garnet text-[48px] leading-[0.95] mt-1">DRINK WATER.</div>
        <p className="font-serif text-paper/75 text-[15px] leading-[1.5] mt-6">
          Scan the can, answer 10 quick questions, and unlock your first case — free. Plus automatic entry to win a year of football season tickets <span className="text-paper">($5,000 value)</span>.
        </p>
      </div>
      <button onClick={() => h.go('connection')} className="w-full bg-garnet text-paper font-mono text-[13px] tracking-[0.18em] uppercase py-4.5 rounded-xl hover:bg-garnet-warm transition-colors" style={{ paddingTop: 18, paddingBottom: 18 }}>Tap to win →</button>
      <div className="font-mono text-[10px] tracking-[0.14em] uppercase text-paper/45 text-center mt-4">10 questions · ~2 min</div>
      <div className="font-serif italic text-paper/35 text-[11px] text-center mt-2">Illustrative concept demo · not a live offer.</div>
    </div>
  );

  if (flowKey === 'connection') return (
    <div className="flex-1 flex flex-col">
      <ScreenTitle>How do you connect with the Gamecocks?</ScreenTitle>
      <Choices items={[
        { label: 'Alum', onClick: () => h.pickConnection('Alum', 'ALUM', 'ALUM_ACTIVE') },
        { label: 'Current student', onClick: () => h.pickConnection('Student', 'STUDENT', 'STUDENT_ACTIVE') },
        { label: 'Parent / family of a student', onClick: () => h.pickConnection('Parent', 'PARENT', 'PARENT_HOUSEHOLD') },
        { label: 'Lifelong fan', onClick: () => h.pickConnection('Fan', 'FAN', 'FAN_GENERAL') },
        { label: 'Family of a recruit considering SC', onClick: () => h.pickConnection('Recruit family', 'RECRUIT_FAMILY', 'RECRUIT_PIPELINE_TIER_1', true) },
        { label: 'Other', onClick: () => h.pickConnection('Other', 'GENERAL', 'GENERAL_AUDIENCE') },
      ]} />
    </div>
  );

  if (flowKey === 'sport') return (
    <div className="flex-1 flex flex-col">
      <ScreenTitle>Which Gamecock sport are you most into?</ScreenTitle>
      <Choices items={[
        { label: 'Football', onClick: () => h.pickSport('Football', 'FOOTBALL') },
        { label: "Men's basketball", onClick: () => h.pickSport('MBB', 'MBB') },
        { label: "Women's basketball", onClick: () => h.pickSport('WBB', 'WBB') },
        { label: 'Baseball', onClick: () => h.pickSport('Baseball', 'BSB') },
        { label: 'Other', onClick: () => h.pickSport('Other', 'OTHER') },
      ]} />
    </div>
  );

  if (flowKey === 'year') {
    if (answers.seg === 'ALUM') return <YearInput onSubmit={h.submitYear} />;
    if (answers.seg === 'STUDENT') return (
      <div className="flex-1 flex flex-col">
        <ScreenTitle>What class are you?</ScreenTitle>
        <Choices items={['Freshman', 'Sophomore', 'Junior', 'Senior', 'Grad student'].map(c => ({ label: c, onClick: () => h.submitYear(c) }))} />
      </div>
    );
    return null;
  }

  if (flowKey === 'location') return <ZipInput onSubmit={h.submitZip} />;

  if (flowKey === 'tickets') return (
    <div className="flex-1 flex flex-col">
      <ScreenTitle>Season tickets or Gamecock Club member?</ScreenTitle>
      <Choices items={[
        { label: 'Yes — football season tickets', onClick: () => h.pickTickets('FB tix', 'SEASON_TICKET_HOLDER_FB', 'GAMECOCK_CLUB_MEMBER', '$4,200 / yr') },
        { label: 'Yes — other sport season tickets', onClick: () => h.pickTickets('Other tix', 'SEASON_TICKET_HOLDER', null, '$1,800 / yr') },
        { label: 'Yes — Gamecock Club member', onClick: () => h.pickTickets('Club', null, 'GAMECOCK_CLUB_MEMBER', '$2,500 / yr') },
        { label: 'Used to be', onClick: () => h.pickTickets('Lapsed', 'LAPSED', null, null) },
        { label: 'Not yet', onClick: () => h.pickTickets('No', null, null, null) },
      ]} />
    </div>
  );

  if (flowKey === 'business') return (
    <div className="flex-1 flex flex-col">
      <ScreenTitle>Own or work at a business that could stock Gamecock water?</ScreenTitle>
      <Choices items={[
        { label: 'Yes — restaurant or bar', onClick: () => h.pickBusiness('Restaurant', 'RESTAURANT_BAR', true) },
        { label: 'Yes — hotel or hospitality', onClick: () => h.pickBusiness('Hotel', 'HOTEL_HOSPITALITY', true) },
        { label: 'Yes — office / professional', onClick: () => h.pickBusiness('Office', 'OFFICE_PROFESSIONAL', true) },
        { label: 'Yes — fitness / wellness', onClick: () => h.pickBusiness('Wellness', 'FITNESS_WELLNESS', true) },
        { label: 'Yes — retail', onClick: () => h.pickBusiness('Retail', 'RETAIL', true) },
        { label: 'No', onClick: () => h.pickBusiness('No', null, false) },
      ]} />
    </div>
  );

  if (flowKey === 'recruit') return (
    <div className="flex-1 flex flex-col">
      <ScreenTitle>Anyone in your household ages 13–18 being recruited, or considering SC?</ScreenTitle>
      <Choices items={[
        { label: 'Yes — being actively recruited', onClick: () => h.pickRecruit('Recruited', true) },
        { label: 'Yes — considering SC', onClick: () => h.pickRecruit('Considering', true) },
        { label: 'No', onClick: () => h.pickRecruit('No', false) },
        { label: 'Prefer not to say', onClick: () => h.pickRecruit('No answer', false) },
      ]} />
    </div>
  );

  if (flowKey === 'subscription') return (
    <div className="flex-1 flex flex-col">
      <ScreenTitle>Want a case shipped to you every month?</ScreenTitle>
      <Choices items={[
        { label: "I'm in", onClick: () => h.pickSub('In', 'HIGH') },
        { label: 'Maybe — tell me more', onClick: () => h.pickSub('Maybe', 'MEDIUM') },
        { label: 'Not for me', onClick: () => h.pickSub('No', 'LOW') },
      ]} />
    </div>
  );

  if (flowKey === 'contact') return <ContactInput onSubmit={h.submitContact} />;
  if (flowKey === 'phone') return <PhoneInput onSubmit={h.submitPhone} />;

  if (flowKey === 'unlock') return (
    <div className="flex-1 flex flex-col items-center justify-center text-center">
      <div className="w-20 h-20 rounded-full bg-garnet flex items-center justify-center mb-6"><span className="text-paper text-[38px] leading-none">✓</span></div>
      <div className="display text-paper text-[44px] leading-[0.95]">YOU'RE IN.</div>
      <p className="font-serif text-paper/75 text-[15px] leading-[1.5] mt-5">
        Your first case ships free. Your sweepstakes entry is locked — one winner gets a full year of football season tickets plus a sideline experience at the rivalry game.
      </p>
      <button onClick={() => document.getElementById('hero')?.scrollIntoView({ behavior: 'smooth' })} className="mt-7 w-full border border-paper/40 text-paper font-mono text-[12px] tracking-[0.18em] uppercase py-4 rounded-xl hover:bg-paper hover:text-ink transition-colors">Back to top ↑</button>
      <div className="font-serif italic text-paper/35 text-[10px] mt-5 leading-[1.4]">Illustrative concept demo · not affiliated with the University of South Carolina.</div>
    </div>
  );
  return null;
}

function YearInput({ onSubmit }) {
  const [v, setV] = React.useState(2010);
  return (
    <div className="flex-1 flex flex-col">
      <ScreenTitle>Class of?</ScreenTitle>
      <input type="number" value={v} onChange={e => setV(e.target.value)} className="w-full bg-paper/[0.06] border border-paper/20 text-paper text-[22px] font-mono px-4 py-3 rounded-lg focus:outline-none focus:border-garnet" />
      <div className="mt-auto"><ContinueBtn onClick={() => onSubmit(v)} /></div>
    </div>
  );
}
function ZipInput({ onSubmit }) {
  const [v, setV] = React.useState('');
  return (
    <div className="flex-1 flex flex-col">
      <ScreenTitle sub="Helps route your case and target your game-day emails.">What's your ZIP code?</ScreenTitle>
      <input inputMode="numeric" placeholder="29208" value={v} onChange={e => setV(e.target.value.replace(/\D/g, '').slice(0, 5))} className="w-full bg-paper/[0.06] border border-paper/20 text-paper text-[22px] font-mono px-4 py-3 rounded-lg focus:outline-none focus:border-garnet placeholder-paper/30" />
      <div className="mt-auto"><ContinueBtn onClick={() => onSubmit(v)} /></div>
    </div>
  );
}
function ContactInput({ onSubmit }) {
  const [n, setN] = React.useState('');
  const [e2, setE2] = React.useState('');
  return (
    <div className="flex-1 flex flex-col">
      <ScreenTitle sub="Required to confirm your free case + entry.">Your name + email.</ScreenTitle>
      <div className="space-y-2.5">
        <input placeholder="Full name" value={n} onChange={e => setN(e.target.value)} className="w-full bg-paper/[0.06] border border-paper/20 text-paper text-[14px] px-4 py-3 rounded-lg focus:outline-none focus:border-garnet placeholder-paper/30" />
        <input type="email" placeholder="Email" value={e2} onChange={e => setE2(e.target.value)} className="w-full bg-paper/[0.06] border border-paper/20 text-paper text-[14px] px-4 py-3 rounded-lg focus:outline-none focus:border-garnet placeholder-paper/30" />
      </div>
      <div className="mt-auto"><ContinueBtn label="Confirm entry →" onClick={() => onSubmit(n, e2)} /></div>
    </div>
  );
}
function PhoneInput({ onSubmit }) {
  const [v, setV] = React.useState('');
  return (
    <div className="flex-1 flex flex-col">
      <ScreenTitle sub="Optional. Only texts when something good is happening.">Phone for game-day alerts?</ScreenTitle>
      <input inputMode="tel" placeholder="(803) 555-0142" value={v} onChange={e => setV(e.target.value)} className="w-full bg-paper/[0.06] border border-paper/20 text-paper text-[16px] font-mono px-4 py-3 rounded-lg focus:outline-none focus:border-garnet placeholder-paper/30" />
      <div className="mt-auto flex gap-2">
        <button onClick={() => onSubmit(true)} className="flex-1 border border-paper/25 text-paper/70 font-mono text-[11px] tracking-[0.14em] uppercase py-3.5 rounded-lg hover:border-paper/50 transition-colors">Skip</button>
        <button onClick={() => onSubmit(false)} className="flex-[2] bg-garnet text-paper font-mono text-[11px] tracking-[0.16em] uppercase py-3.5 rounded-lg hover:bg-garnet-warm transition-colors">Finish →</button>
      </div>
    </div>
  );
}
function ContinueBtn({ onClick, label = 'Continue →' }) {
  return <button onClick={onClick} className="w-full bg-garnet text-paper font-mono text-[13px] tracking-[0.18em] uppercase py-4 rounded-xl hover:bg-garnet-warm transition-colors">{label}</button>;
}

/* ---------------- CARD ICONS ---------------- */
function CardIcon({ kind }) {
  const p = { width: 30, height: 30, viewBox: '0 0 24 24', fill: 'none', stroke: '#73000A', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (kind === 'recruit') return <svg {...p}><path d="M12 3l9 5-9 5-9-5 9-5Z" /><path d="M21 8v6" /><path d="M7 11v4c0 1.5 2.5 3 5 3s5-1.5 5-3v-4" /></svg>;
  if (kind === 'biz') return <svg {...p}><path d="M3 21V8l9-5 9 5v13" /><path d="M3 21h18" /><path d="M9 21v-6h6v6" /></svg>;
  if (kind === 'donor') return <svg {...p}><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.5-7 10-7 10Z" /></svg>;
  if (kind === 'list') return <svg {...p}><path d="M8 6h13M8 12h13M8 18h13" /><path d="M3 6h.01M3 12h.01M3 18h.01" /></svg>;
  return null;
}

window.ConsumerJourney = ConsumerJourney;