// Home/Landing screen — 4-step redemption process overview

function HomeScreen({ onClaim, onTrack }) {
  const [openStep, setOpenStep] = React.useState(null);
  const [tncOpen, setTncOpen] = React.useState(false);

  const steps = [
    {
      n: 1, title: 'Buy',
      window: '17 Apr — 16 May 2026', windowLabel: 'Purchase window',
      Icon: IconPackage, tint: 'orange',
      bullets: [
        'Buy an eligible product during the promo window.',
        'Purchase must be from an official participating reseller.',
        'Keep your invoice — you\'ll need to upload it in step 2.',
      ],
      cta: { label: 'See eligible products', variant: 'ghost', href: '#eligible' },
    },
    {
      n: 2, title: 'Claim',
      window: '17 Apr — 30 Jun 2026', windowLabel: 'Claim window',
      Icon: IconGift, tint: 'orange',
      bullets: [
        'Submit your claim between 17 Apr — 30 Jun 2026.',
        'Have your serial number, invoice and delivery address ready.',
        'Takes about 3 minutes on mobile.',
      ],
      cta: { label: 'Start my claim', variant: 'primary', action: 'claim' },
    },
    {
      n: 3, title: 'Wait',
      window: 'Up to 14 days', windowLabel: 'Verification',
      Icon: IconClock, tint: 'slate',
      bullets: [
        'Your claim is reviewed against the T&Cs.',
        'You can check status any time using your submission ID.',
        'We\'ll email you if anything needs clarifying.',
      ],
      cta: { label: 'Track my submission', variant: 'secondary', action: 'track' },
    },
    {
      n: 4, title: 'Reward',
      window: 'Within 45 days', windowLabel: 'Fulfilment',
      Icon: IconSparkle, tint: 'green',
      bullets: [
        'Approved claims trigger an email with the digital reward or next steps.',
        'Physical bundles ship to the address on your claim form.',
        'Track & trace info shared once dispatched.',
      ],
    },
  ];

  return (
    <div className="min-h-full bg-white">
      <section className="relative overflow-hidden text-white"
        style={{ background: 'linear-gradient(160deg, #0F1117 0%, #1A1D26 55%, #1F232E 100%)' }}>
        <div className="absolute -top-24 -right-24 w-72 h-72 rounded-full opacity-25 blur-3xl"
          style={{ background: 'var(--s3-orange)' }}/>
        <div className="absolute -bottom-32 -left-20 w-80 h-80 rounded-full opacity-10 blur-3xl"
          style={{ background: 'var(--s3-orange)' }}/>

        <div className="relative px-5 pt-6 pb-7 max-w-[520px] mx-auto">
          <div className="inline-flex items-center gap-1.5 px-2 py-1 rounded-full bg-white/10 border border-white/15 mb-4">
            <span className="w-1.5 h-1.5 rounded-full animate-pulse" style={{background:'var(--s3-orange)'}}/>
            <span className="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-white/90">Campaign live</span>
          </div>
          <h1 className="text-[26px] font-bold tracking-tight leading-[1.1] mb-2">
            Bambu Lab X2D Combo<br/>
            <span style={{color:'var(--s3-orange)'}}>Pre-Order Campaign</span>
          </h1>
          <p className="text-[13.5px] text-white/70 leading-relaxed max-w-[32ch]">
            Claim your filament bundle in four steps. About 3 minutes — ID and invoice ready.
          </p>
          <div className="mt-5 grid grid-cols-1 gap-2">
            <button onClick={onClaim}
              className="h-12 rounded-xl font-semibold text-[15px] text-white active:scale-[0.98] transition-transform shadow-lg"
              style={{ background: 'var(--s3-orange)', boxShadow: '0 10px 24px -10px rgba(245,115,31,0.7)' }}>
              Submit my claim
            </button>
            <button onClick={onTrack}
              className="h-11 rounded-xl font-medium text-[14px] text-white/90 bg-white/10 border border-white/15 hover:bg-white/15 active:scale-[0.98] transition-all">
              Track my submission
            </button>
          </div>
          <div className="mt-5 grid grid-cols-2 gap-2">
            <KeyDate label="Buy by" date="16 May 2026"/>
            <KeyDate label="Claim by" date="30 Jun 2026"/>
          </div>
        </div>
      </section>

      <div className="max-w-[520px] mx-auto">
        <section className="px-5 pt-6 pb-2">
          <div className="flex items-baseline justify-between">
            <h2 className="text-[17px] font-bold tracking-tight text-neutral-900">Redemption process</h2>
            <span className="text-[11px] font-medium text-neutral-400 uppercase tracking-wider">4 steps</span>
          </div>
          <p className="text-[12.5px] text-neutral-500 mt-1">Tap a step to see what's required.</p>
        </section>

        <section className="px-4 pb-2 space-y-2.5 relative">
          <div className="absolute left-[32px] top-4 bottom-4 w-px bg-neutral-200 pointer-events-none" aria-hidden/>
          {steps.map((s) => (
            <StepCard key={s.n} step={s}
              open={openStep === s.n}
              onToggle={() => setOpenStep(openStep === s.n ? null : s.n)}
              onCta={(action) => {
                if (action === 'claim') onClaim();
                else if (action === 'track') onTrack();
                else if (action === 'eligible') {
                  document.querySelector('#eligible')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
              }}/>
          ))}
        </section>

        <section id="eligible" className="mt-4 mx-4 rounded-2xl border border-neutral-200 bg-neutral-50 p-4">
          <div className="flex items-start gap-3">
            <div className="w-10 h-10 rounded-lg grid place-items-center shrink-0" style={{background:'var(--s3-orange-50)'}}>
              <IconPackage size={18} style={{color:'var(--s3-orange)'}}/>
            </div>
            <div className="flex-1 min-w-0">
              <div className="text-[13.5px] font-semibold text-neutral-900">Eligible products</div>
              <div className="text-[12px] text-neutral-500 mt-0.5 leading-relaxed">
                Bambu Lab X2D Combo, X2D Bundle and participating filament kits sold by authorised Smith3D resellers.
              </div>
            </div>
          </div>
        </section>

        <section className="px-5 py-6 mt-2">
          <div className="flex items-center gap-2 text-[12px] text-neutral-500 mb-2">
            <IconInfo size={14} className="text-neutral-400"/>
            <span>Need help?</span>
          </div>
          <div className="flex flex-wrap gap-x-4 gap-y-1 text-[12.5px]">
            <button onClick={() => setTncOpen(true)} className="text-neutral-900 font-medium underline decoration-neutral-300 underline-offset-4">Terms & conditions</button>
            <a href="mailto:sales@smith3d.com" className="text-neutral-900 font-medium underline decoration-neutral-300 underline-offset-4">sales@smith3d.com</a>
            <a href="tel:+60103443128" className="text-neutral-900 font-medium underline decoration-neutral-300 underline-offset-4">010-344 3128</a>
          </div>
          <div className="mt-4 text-[10.5px] text-neutral-400 leading-relaxed">
            Smith3D is an authorised Bambu Lab reseller. The X2D Combo Pre-Order Campaign is subject to the full terms & conditions. Rewards while stocks last.
          </div>
        </section>
      </div>

      <BottomSheet open={tncOpen} title="Terms & conditions" onClose={() => setTncOpen(false)}>
        <div className="space-y-3">
          <p>This campaign is a pre-order promotion for the Bambu Lab X2D Combo offered exclusively through authorised Smith3D resellers in Malaysia between 17 April 2026 and 16 May 2026.</p>
          <p>Claims must be submitted between 17 April 2026 and 30 June 2026. Only one claim is allowed per eligible serial number, and the invoice submitted must match the claim details.</p>
          <p>Verification may take up to 14 working days. Approved rewards will be dispatched within 45 days of approval.</p>
          <p>Smith3D reserves the right to reject claims that do not comply with these terms.</p>
        </div>
      </BottomSheet>
    </div>
  );
}

function KeyDate({ label, date }) {
  return (
    <div className="rounded-lg bg-white/8 border border-white/10 px-3 py-2">
      <div className="text-[10px] font-semibold uppercase tracking-wider text-white/50">{label}</div>
      <div className="text-[13px] font-semibold text-white mt-0.5">{date}</div>
    </div>
  );
}

function StepCard({ step, open, onToggle, onCta }) {
  const { n, title, window: win, windowLabel, Icon, tint, bullets, cta } = step;
  const tintClass = {
    orange: { iconBg: 'bg-orange-50', iconFg: 'text-[var(--s3-orange)]', num: 'bg-[var(--s3-orange)] text-white' },
    slate:  { iconBg: 'bg-slate-100', iconFg: 'text-slate-600',           num: 'bg-slate-700 text-white' },
    green:  { iconBg: 'bg-green-50',  iconFg: 'text-green-700',           num: 'bg-green-600 text-white' },
  }[tint];

  return (
    <div className={`relative rounded-2xl bg-white border border-neutral-200 transition-shadow ${open ? 'shadow-md' : ''}`}>
      <div className="absolute left-5 top-5 -translate-x-1/2 z-10">
        <div className={`w-7 h-7 rounded-full grid place-items-center text-[12px] font-bold shadow-sm ring-4 ring-white ${tintClass.num}`}>
          {n}
        </div>
      </div>
      <button onClick={onToggle} className="w-full text-left pl-11 pr-4 py-4 flex items-center gap-3">
        <div className={`w-9 h-9 rounded-lg grid place-items-center shrink-0 ${tintClass.iconBg}`}>
          <Icon size={17} className={tintClass.iconFg}/>
        </div>
        <div className="flex-1 min-w-0">
          <div className="text-[15px] font-semibold text-neutral-900 leading-tight">{title}</div>
          <div className="flex items-center gap-1.5 mt-0.5">
            <span className="text-[11px] font-semibold uppercase tracking-wider text-neutral-400">{windowLabel}</span>
            <span className="text-neutral-300">·</span>
            <span className="text-[12px] font-medium text-neutral-700">{win}</span>
          </div>
        </div>
        <IconChevronDown size={16} className={`text-neutral-400 shrink-0 transition-transform ${open ? 'rotate-180' : ''}`}/>
      </button>
      {open && (
        <div className="pl-11 pr-4 pb-4 -mt-1 space-y-3">
          <ul className="space-y-1.5">
            {bullets.map((b, i) => (
              <li key={i} className="flex gap-2 text-[13px] text-neutral-700 leading-relaxed">
                <span className="shrink-0 w-1 h-1 rounded-full bg-neutral-400 mt-[9px]"/>
                <span>{b}</span>
              </li>
            ))}
          </ul>
          {cta && (
            <div>
              {cta.variant === 'primary' && (
                <button onClick={() => onCta(cta.action)}
                  className="h-10 px-4 rounded-lg text-[13.5px] font-semibold text-white active:scale-95 transition"
                  style={{background:'var(--s3-orange)'}}>
                  {cta.label} →
                </button>
              )}
              {cta.variant === 'secondary' && (
                <button onClick={() => onCta(cta.action)}
                  className="h-10 px-4 rounded-lg text-[13.5px] font-semibold text-neutral-900 bg-neutral-100 hover:bg-neutral-200 active:scale-95 transition">
                  {cta.label}
                </button>
              )}
              {cta.variant === 'ghost' && (
                <button onClick={() => onCta('eligible')}
                  className="h-9 px-3 rounded-lg text-[12.5px] font-medium text-[var(--s3-orange)] hover:bg-orange-50 active:scale-95 transition">
                  {cta.label} →
                </button>
              )}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { HomeScreen });