(function(){
const { Button, CtaBand, GradientOrbCard } = window.DS;
const Icon = window.MunaIcon;

const AUD = [
  { id: 'brands', label: 'brands', statement: 'Infrastructure for brands.', body: 'we are the infrastructure-as-a-service partner that enables retailers to participate in resale at scale, driving commercial growth without compromising brand trust.', orb: 'blush', eyebrow: 'BUILT FOR' },
  { id: 'consumers', label: 'consumers', statement: 'A movement for consumers.', body: 'embedded resale layer inside your favourite brands, turning what you’ve loved into credit for what you’ll love next.', orb: 'lilac', link: 'Muna Resell', eyebrow: 'DELIVERING VALUE FOR' }
];

function AudienceTabs({ onNavigate }) {
  const [i, setI] = React.useState(0);
  const a = AUD[i];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-xl)' }}>
      <div style={{ display: 'flex', gap: 'var(--space-sm)', flexWrap: 'wrap' }}>
        {AUD.map((t, n) => <Button key={t.id} variant={n === i ? 'primary' : 'outline'} onClick={() => setI(n)}>{t.label}</Button>)}
      </div>
      <div className="split">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
          <h3 className="t-display-md" style={{ textWrap: 'pretty' }}>{a.statement}</h3>
          <p className="t-body-md" style={{ maxWidth: '52ch', textWrap: 'pretty' }}>{a.body}</p>
          {a.link && <div><Button variant="text" iconAfter={<Icon name="arrow-right" size={16} />} onClick={() => onNavigate(a.link)}>learn more</Button></div>}
        </div>
        <GradientOrbCard orb={a.orb} height={300} align="left" eyebrow={a.eyebrow} title={a.label} />
      </div>
    </div>
  );
}

function DemoForm() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <Button size="lg" onClick={() => window.munaBook()} iconAfter={<Icon name="arrow-right" size={16} />}>book a demo</Button>
    </div>
  );
}

function HomeScreen({ onNavigate, onDemo }) {
  return (
    <main data-screen-label="Overview">
      <div className="hero-zone">
        <window.MunaHero onDemo={onDemo} onNavigate={onNavigate} />

        <Band reveal bare id="what-we-do" eyebrow="what we do" title="Muna is building the infrastructure that turns resale into a growth engine for African retail." sub="We give brands the tools to capture new revenue from resale and surplus stock.">
          <AudienceTabs onNavigate={onNavigate} />
        </Band>
      </div>

      <Band reveal id="products" eyebrow="our products" title="Purpose-built tools that turn resale into a new revenue stream for your business.">
        <div className="g2">
          <ProductCard eyebrow="own the loop" name="Resellr" lead="Keep customers in your world." onOpen={() => onNavigate('Muna Resell')} sticker={window.munaAsset('resellr-phones', 'assets/resellr-phones-v2.png')}
            body={<p>Resellr gives customers a trusted way to resell with the brands they love. It plugs into your existing stack to turn every resale into store credit, repeat purchases, and compounding revenue.</p>} />
          <ProductCard eyebrow="recover value" name="Deadstockr" lead="Recover value from stock that isn’t moving." onOpen={() => onNavigate('deadstockr')} sticker={[window.munaAsset('ds-signin', 'assets/deadstockr-signin.png'), window.munaAsset('ds-dash', 'assets/deadstockr-dashboard.png')]}
            body={<p>Deadstockr turns slow-moving inventory into measurable financial outcomes, using AI to price your stock competitively and connect it with the right buyers, through channels that protect your brand.</p>} />
        </div>
      </Band>

      <Band reveal soft id="use-cases" eyebrow="use cases" title="Where resale earns its place in the business.">
        <div className="g3">
          <ProductCard eyebrow="circular by design" name="RETHREAD" lead="How RETHREAD turned longevity into a circular resale model" onOpen={onDemo} sticker={window.munaAsset('rethread', 'assets/rethread-look.png')}
            body={<p>RETHREAD built a fashion label around intentional production, conscious consumption and timeless design.</p>} />
          <ProductCard eyebrow="keeping culture in circulation" name="HAPPYVILLE" lead="How HAPPYVILLE balanced exclusivity with resale." onOpen={onDemo} sticker={window.munaAsset('happyville', 'assets/happyville-look.png')}
            body={<p>HAPPYVILLE built its identity through culture, scarcity and storytelling.</p>} />
          <ProductCard eyebrow="Born out of passion" name="FLOAT" lead="How FLOAT unlocked value from post-cycle inventory." onOpen={onDemo} sticker={window.munaAsset('float', 'assets/float-look.png')}
            body={<p>FLOAT has always produced with intention, but even then surplus was inevitable.</p>} />
        </div>
      </Band>

      <div id="demo">
        <CtaBand className="ctaband ctaband-blue" orb="blush" title="See your revenue potential" subhead="Book a 30-minute demo tailored to your business." actions={<DemoForm />} />
      </div>
    </main>
  );
}

window.HomeScreen = HomeScreen;
})();