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

function DeadstockrScreen({ onNavigate, onDemo }) {
  return (
    <main data-screen-label="deadstockr">
      <HeroBand
        orb="mist"
        align="left"
        eyebrow="b2b deadstock"
        title="turns slow-moving inventory into measurable financial outcomes"
        subhead="Deadstockr clears slow-moving stock through controlled routes to market, so you protect margins and your brand at the same 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('Muna Resell')}>see Muna Resell</Button></>}
      />

      <Band reveal soft eyebrow="how it works" title="the right buyers, at the right price.">
        <div className="g3">
          <FeatureCard eyebrow="01" title="The right buyers" body="Your surplus reaches genuine demand, not a discount bin." />
          <FeatureCard eyebrow="02" title="The right price" body="Your stock sells for what the market will pay, not what it is costing you to hold." />
          <FeatureCard eyebrow="03" title="Protected channels" body="Inventory clears without discounting your brand or diluting your positioning." />
        </div>
      </Band>

      <Band reveal eyebrow="outcomes" title="without damaging the brand.">
        <div className="g2">
          <FeatureCard eyebrow="inventory" title="Turn slow-moving inventory into measurable financial outcomes." />
          <FeatureCard eyebrow="capital" title="Protect your brand equity while recovering capital sitting in your warehouse." />
        </div>
      </Band>

      <CtaBand className="ctaband" orb="sage" title="Book a Recovery Assessment" subhead="See how it works" actions={<Button size="lg" onClick={onDemo} iconAfter={<Icon name="arrow-right" size={16} />}>book a demo</Button>} />
    </main>
  );
}

window.DeadstockrScreen = DeadstockrScreen;
})();