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

function ResellScreen({ onNavigate, onDemo }) {
  return (
    <main data-screen-label="Muna Resell">
      <HeroBand
        orb="mist"
        align="left"
        eyebrow="embedded resale"
        title="embedded resale layer inside your favourite brands"
        subhead="Muna Resell keeps customers in your ecosystem, deepens loyalty and creates a new revenue stream that compounds over time."
        actions={<><Button size="lg" onClick={onDemo} iconAfter={<Icon name="arrow-right" size={16} />}>book a demo</Button><Button size="lg" variant="outline" onClick={() => onNavigate('deadstockr')}>see deadstockr</Button></>}
      />

      <Band reveal soft eyebrow="how it works" title="turning what you’ve loved into credit for what you’ll love next.">
        <div className="split">
          <div>
            <Step n="01" title="List it in seconds">Snap, upload, and list the pieces you’re ready to pass on — right where you already shop.</Step>
            <Step n="02" title="Let Muna Intelligence do the work">We authenticate your item, verify its condition, and recommend a competitive price — so it sells fast and fairly.</Step>
            <Step n="03" title="Get credit for your next find">When your item sells, you earn store credit with your chosen brand — ready to spend on whatever you love next.</Step>
          </div>
          <GradientOrbCard orb="lilac" height={300} align="left" eyebrow="" title="own the loop">
            <img className="orbcard-img" src={window.munaAsset('resellr-lounge', 'assets/resellr-lounge.png')} alt="" aria-hidden="true" />
          </GradientOrbCard>
        </div>
      </Band>

      <Band reveal eyebrow="two sides of the same loop">
        <div className="g2">
          <FeatureCard icon={<Icon name="store" size={16} />} eyebrow="for brands" title="Own your customers’ next purchase." body="Resellr converts pre-loved items into store credit, so shoppers stay in your ecosystem, come back more often, and lift lifetime value." />
          <FeatureCard icon={<Icon name="users" size={16} />} eyebrow="for consumers" title="Nothing goes to waste, not even style." body="Pass on what you’ve loved and put its value straight toward what’s next." />
        </div>
      </Band>

      <CtaBand className="ctaband" orb="apricot" title="Build your resale program" subhead="Keep value moving" actions={<Button size="lg" onClick={onDemo} iconAfter={<Icon name="arrow-right" size={16} />}>Talk to our team</Button>} />
    </main>
  );
}

window.ResellScreen = ResellScreen;
})();