/* Hero — atmospheric orb field, marquee, and the live loop carousel. */
(function(){
const { Button } = window.DS;
const Icon = window.MunaIcon;

const STAGES = [
  { k: 'in wardrobe', d: 'a piece the customer has stopped wearing sits idle at home.', orb: 'true-blue', img: window.munaAsset('loop-1', 'assets/loop-1-in-wardrobe.png'), cls: 'loop-img-rack' },
  { k: 'sent in', d: 'they send it back through the brand they bought it from.', orb: 'sky-blue', img: window.munaAsset('loop-2', 'assets/loop-2-sent-in.png'), cls: 'loop-img-parcel' },
  { k: 'listed', d: 'muna lists it across resale channels in south africa and beyond.', orb: 'lucid-lime', img: window.munaAsset('loop-3', 'assets/loop-3-listed.png'), plain: true },
  { k: 'sold', d: 'it finds its next owner at a price the market will carry.', orb: 'muted-grey', img: window.munaAsset('loop-4', 'assets/loop-4-sold.png'), plain: true },
  { k: 'credit issued', d: 'value returns as store credit — the customer stays in your ecosystem.', orb: 'true-blue', img: window.munaAsset('loop-5', 'assets/loop-5-credit-issued.png'), cls: 'loop-img-voucher' }
];

function LoopWidget() {
  const [i, setI] = React.useState(0);
  const [live, setLive] = React.useState(true);
  React.useEffect(() => {
    if (!live) return;
    const t = setInterval(() => setI((v) => (v + 1) % STAGES.length), 2600);
    return () => clearInterval(t);
  }, [live]);
  const s = STAGES[i];
  return (
    <div className="loop" onMouseEnter={() => setLive(false)} onMouseLeave={() => setLive(true)}>
      <div className="loop-top">
        <span className="t-caption-upper">the loop</span>
        <span className="t-caption" style={{ color: 'var(--text-muted)' }}>{String(i + 1).padStart(2, '0')} / {STAGES.length}</span>
      </div>
      <div className={'loop-orb' + (s.cls || s.plain ? ' loop-orb-plain' : '')} style={{ backgroundImage: s.cls || s.plain ? 'none' : `var(--orb-${s.orb})` }}>
        {s.img && <img className={'loop-img' + (s.shift ? ' loop-img-right' : '') + (s.cls ? ' ' + s.cls : '')} src={s.img} alt="" aria-hidden="true" key={s.img} />}
        <span className="t-display-md">{s.k}</span>
      </div>
      <p className="t-body-md" style={{ minHeight: '3.2em', textWrap: 'pretty' }}>{s.d}</p>
      <div className="loop-rail" role="tablist" aria-label="resale loop stages">
        {STAGES.map((st, n) => (
          <button key={st.k} role="tab" aria-selected={n === i} aria-label={st.k} className={'loop-pip' + (n === i ? ' on' : '')} onClick={() => { setI(n); setLive(false); }} />
        ))}
      </div>
    </div>
  );
}

function Hero({ onDemo, onNavigate }) {
  return (
    <section className="hero">
      <div className="orbfield" aria-hidden="true">
        <span className="orb o1" style={{ backgroundImage: 'var(--orb-sky-blue)' }} />
        <span className="orb o2" style={{ backgroundImage: 'var(--orb-true-blue)' }} />
        <span className="orb o3" style={{ backgroundImage: 'var(--orb-muted-grey)' }} />
        <span className="orb o4" style={{ backgroundImage: 'var(--orb-lucid-lime)' }} />
      </div>
      <div className="hero-in">
        <div className="hero-copy">
          <span className="t-caption-upper">resale technology</span>
          <h1 className="t-display-xl" style={{ textWrap: 'pretty' }}>Resale as commercial advantage.</h1>
          <p className="t-body-lg" style={{ maxWidth: '48ch', textWrap: 'pretty' }}>AI-native infrastructure that keeps value moving inside your ecosystem.</p>
          <div className="proofstrip">
            <span>6 retail partners</span>
            <span className="proof-dot" aria-hidden="true"></span>
            <span>+81% sell-through</span>
            <span className="proof-dot" aria-hidden="true"></span>
            <span>220+ member reseller community</span>
          </div>
          <div style={{ display: 'flex', gap: 'var(--space-sm)', flexWrap: 'wrap', marginTop: 'var(--space-sm)' }}>
            <Button size="lg" onClick={onDemo} iconAfter={<Icon name="arrow-right" size={16} />}>book a demo</Button>
            <Button size="lg" variant="outline" onClick={() => onNavigate('Muna Resell')}>see our products</Button>
          </div>
        </div>
        <LoopWidget />
      </div>
    </section>
  );
}

window.MunaHero = Hero;
})();