/* Sipho — Home page sections */

function HomeHero() {
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div>
          <Reveal as="p" className="eyebrow">{tr('Reusable enteral systems')}</Reveal>
          <Reveal as="h1" delay={60}>{L(<React.Fragment>We're challenging the <span className="leaf">single&#8209;use</span> culture in healthcare.</React.Fragment>, <React.Fragment>Vi udfordrer <span className="leaf">engangs&#8209;kulturen</span> i sundhedsvæsenet.</React.Fragment>)}</Reveal>
          <Reveal as="p" className="hero-lead" delay={120}>
            {tr('We develop reusable medical devices that cut plastic waste in hospitals, without compromising patient safety or clinical efficiency.')}
          </Reveal>
          <Reveal className="hero-actions" delay={180}>
            <a className="btn btn-primary btn-lg" href="product.html#demo"><Icon name="arrow-right" />{tr('See the solution')}</a>
            <a className="btn btn-secondary btn-lg" href="product.html#status">{tr('Follow our test phase')}</a>
          </Reveal>
          <Reveal className="hero-meta" delay={240}>
            <div>
              <div className="stat-num">{tr('×10,000')}</div>
              <div className="stat-lab">{tr('uses per reusable plunger')}</div>
            </div>
            <div>
              <div className="stat-num">35%</div>
              <div className="stat-lab">{tr('less single-use plastic')}</div>
            </div>
            <div>
              <div className="stat-num">ENFit</div>
              <div className="stat-lab">{tr('compatible')}</div>
            </div>
          </Reveal>
        </div>
        <Reveal className="hero-photo" delay={120}>
          <img src="assets/photo-clinician.jpg" alt={tr('A clinician on the ward holding a 60 ml ENFit enteral syringe and the Sipho reusable plunger')} />
          <div className="float">
            <div className="fic"><Icon name="recycle" /></div>
            <div>
              <div className="ft">{tr('Reusable plunger')}</div>
              <div className="fs">{tr('Human Factors Engineering tests are ongoing')}</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function TrustStrip() {
  const tags = ['ENFIT', '5 ML', '10 ML', '20 ML', '60 ML', '100 ML', 'ISO 13485', 'MADE IN DENMARK'];
  return (
    <div className="trust">
      <div className="wrap trust-inner">
        <span className="trust-label">{tr('Built to standard')}</span>
        <div className="trust-tags">
          {tags.map(x => <span key={x} className="spec-tag">{tr(x)}</span>)}
        </div>
      </div>
    </div>
  );
}

function Problem() {
  const cards = [
    { num: '39,000', u: '', lab: 'Tonnes of waste produced by the Danish healthcare sector every year — about 4.4 tonnes an hour.', src: 'Dagens Medicin', href: 'https://www.dagensmedicin.dk/nyheder/overblik/hospitalerne-producerer-44-ton-affald-i-timen-nu-skal-det-sorteres/' },
    { num: '4,000', u: '', lab: 'Tonnes of plastic used annually just to package medical products at Danish hospitals (COWI estimate).', src: 'Plastikviden.dk', href: 'https://plastikviden.dk/nyheder/2022/april/regionerne-gaar-til-kamp-for-mere-baeredygtig-emballage-paa-hospitaler-i-norden' },
    { num: '1970s', u: '', lab: 'When healthcare began its shift to disposables — driven by the plastic revolution, sterility demands and the push for efficiency.', src: 'Single-use medical devices', href: 'https://en.wikipedia.org/wiki/Single-use_medical_devices' },
  ];
  return (
    <section className="problem" id="problem">
      <div className="grid-tex"></div>
      <div className="wrap problem-inner">
        <SectionHead eyebrow="The problem" title="Healthcare runs on things it throws away." />
        <Reveal as="p" className="problem-lead">
          {tr('Modern hospitals are clean and efficient — and that efficiency was built on single-use plastic. Every feed, every procedure adds to a waste stream that has been growing for fifty years.')}
        </Reveal>
        <div className="problem-grid">
          {cards.map((c, i) => (
            <Reveal className="problem-card" key={i} delay={i * 90}>
              <div className="pc-num">{tr(c.num)}{c.u && <span className="u">{c.u}</span>}</div>
              <div className="pc-lab">{tr(c.lab)}</div>
              <a className="pc-src" href={c.href} target="_blank" rel="noopener"><Icon name="external-link" />{c.src}</a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Vision() {
  return (
    <section className="vision" id="vision">
      <div className="wrap">
        <div className="vrow">
          <div>
            <Reveal as="p" className="eyebrow">{tr('Why we exist')}</Reveal>
            <Reveal as="h3" delay={60}>{tr('We wouldn\'t accept "you can\'t change single-use syringes."')}</Reveal>
            <Reveal as="p" delay={120}>
              {tr('Sipho grew out of a university project to redesign a medical syringe pump. We took the pump apart, weighed every component and ran a full material analysis — and found the pump barely registered next to the single-use plastic it consumed. So we changed the project, and rebuilt the syringe instead. That redesign is our product.')}
            </Reveal>
            <Reveal as="p" delay={160}>
              {tr('We want to be one of the driving forces in the green transition of healthcare, where hybrid products combine a reusable, high-quality product with a sterile single-use product.')}
            </Reveal>
            <Reveal delay={200} style={{ marginTop: '26px' }}>
              <a className="btn btn-secondary" href="about.html"><Icon name="users" />{tr('Meet the team')}</a>
            </Reveal>
          </div>
          <Reveal className="vrow-media" delay={120}>
            <img src="assets/photo-syringes-table.jpg" alt={tr('Disposable enteral syringes beside the Sipho reusable aluminium plunger on a ward table')} />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function WhyES50() {
  const items = [
    { ic: 'shield-check', eco: false, h: 'Clinical performance, every time', p: 'The syringe barrel and gasket remain single-use, just as they are today. Only the plunger, which never comes into contact with the patient or the feed, becomes a reusable medical device. Patient safety remains unchanged.' },
    { ic: 'recycle', eco: true, h: 'Designed to be reused', p: 'The plunger is made from anodised recycled aluminium: dirt-repellent, light, and close to 100% recyclable. One replaces roughly 10,000 disposable plungers over five years.' },
    { ic: 'bar-chart-3', eco: false, h: 'Data-driven, under validation', p: 'Our initial LCA screening demonstrates the environmental potential based on material selection and end-of-life disposal. Ongoing Human Factors Engineering studies will provide the data needed to further refine and validate the full life cycle assessment.' },
  ];
  return (
    <section className="section" id="why">
      <div className="wrap">
        <SectionHead eyebrow="Why Sipho's plunger" title="Engineered for reuse, not for the bin." lead="We have developed a syringe designed to last, with a focus on cleanability, supply resilience, sustainability, and seamless integration into existing clinical practice." />
        <div className="feature-grid">
          {items.map((f, i) => (
            <Reveal className={'feature' + (f.eco ? ' eco' : '')} key={i} delay={i * 90}>
              <div className="fic"><Icon name={f.ic} /></div>
              <h3>{tr(f.h)}</h3>
              <p>{tr(f.p)}</p>
            </Reveal>
          ))}
        </div>
        <Reveal style={{ marginTop: '32px' }}>
          <a className="btn btn-primary" href="product.html"><Icon name="arrow-right" />{tr('How the product works')}</a>
        </Reveal>
      </div>
    </section>
  );
}

function TestPartners() {
  const partners = [
    { mono: 'M', name: 'Medicina', role: 'ENFit enteral & stoma devices · Bolton, UK', bio: 'Medicina is a British medical-device company and part of the HMC Group since 2017. Headquartered in Bolton, it designs and distributes ENFit enteral feeding and stoma devices globally, manufactured by the HMC Group in Mirandola, Italy.' },
    { mono: 'BD', name: 'BD — Becton, Dickinson and Company', role: 'Global medical technology · USA', bio: 'BD is an American multinational medical-technology company that manufactures and sells medical devices, instrument systems and reagents, and also provides consulting and analytics services.' },
    { mono: 'RH', name: 'Region Hovedstaden', role: 'Public healthcare authority · Copenhagen, Denmark', bio: "Region Hovedstaden is Denmark's largest healthcare system, responsible for operating and developing hospital care, somatic and psychiatric services, and emergency response for citizens across the capital region." },
  ];
  return (
    <section className="section" id="partners" style={{ background: 'var(--grey-50)' }}>
      <div className="wrap">
        <SectionHead eyebrow="Test partners" title="We're testing with three established partners in industry and healthcare." lead="Our Human Factors Engineering studies are conducted using test products supplied by two established medical device manufacturers, together with clinical input from Region Hovedstaden, Denmark's largest healthcare authority — helping validate the solution against current market practice and real clinical needs." />
        <div className="advisor-grid">
          {partners.map((p, i) => (
            <Reveal className="advisor-card" key={i} delay={i * 90}>
              <div className="advisor-mono">{p.mono}</div>
              <div className="advisor-body">
                <h3>{p.name}</h3>
                <p className="advisor-role">{tr(p.role)}</p>
                <p className="advisor-bio">{tr(p.bio)}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ImpactBand() {
  const lang = useLang();
  const stats = [
    { to: 10000, d: 0, prefix: '×', u: '', lab: 'Uses per reusable plunger, over ~5 years', accent: true },
    { to: 35, d: 0, u: '%', lab: 'Less single-use plastic per syringe', accent: false },
    { to: 360, d: 0, u: 'kg', lab: 'CO₂e avoided per plunger, lifetime', accent: true },
    { to: 100, d: 0, u: '%', lab: 'Recyclability of the aluminium plunger', accent: false },
    { to: 1, d: 0, prefix: '~', u: lang === 'da' ? 'mia.' : 'bn', lab: 'Enteral feeding syringes used every year in the EU — this syringe type alone', accent: true },
    { to: 36000, d: 0, u: 't', lab: 'CO₂e the EU could cut every year by switching to Sipho\'s reusable plunger — this syringe type alone', accent: false },
  ];
  return (
    <section className="impact" id="impact">
      <div className="grid-tex"></div>
      <img className="leaf-wm" src="assets/sipho-mark-white.png" alt="" />
      <div className="wrap impact-inner">
        <SectionHead eyebrow="Impact, in numbers" title="Sustainability backed by data." />
        <div className="impact-stats">
          {stats.map((s, i) => (
            <Reveal className="impact-stat" key={i} delay={i * 80}>
              <div className="big">
                <span className={s.accent ? 'accent' : ''}><CountUp to={s.to} decimals={s.d} prefix={s.prefix || ''} /></span>
                {s.u && <span className="u">{s.u}</span>}
              </div>
              <div className="lab">{tr(s.lab)}</div>
            </Reveal>
          ))}
        </div>
        <Reveal style={{ marginTop: '40px' }}>
          <a className="btn btn-accent btn-lg" href="impact.html"><Icon name="leaf" />{tr('See the full CO₂e breakdown')}</a>
        </Reveal>
      </div>
    </section>
  );
}

function HomeCTA() {
  return (
    <section className="cta" id="cta">
      <div className="wrap">
        <Reveal className="cta-box">
          <img className="leaf-wm" src="assets/sipho-mark-white.png" alt="" />
          <div className="inner">
            <p className="eyebrow">{tr('Get involved')}</p>
            <h2>{tr('Want to see the reusable plunger on your ward?')}</h2>
            <p>{tr('We\u2019re scoping our Human Factors Engineering test now. Tell us about your unit and we\u2019ll come back with a baseline of the plastic and CO\u2082e you\u2019d avoid.')}</p>
            <div className="cta-actions">
              <a className="btn btn-accent btn-lg" href="contact.html"><Icon name="flask-conical" />{tr('Request a test')}</a>
              <a className="btn btn-secondary btn-lg" href="history.html" style={{ background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,.3)' }}><Icon name="history" />{tr('See how we got here')}</a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function HomeApp() {
  useLang();
  useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, []);
  return (
    <React.Fragment>
      <Nav />
      <main>
        <HomeHero />
        <TrustStrip />
        <Problem />
        <Vision />
        <WhyES50 />
        <TestPartners />
        <ImpactBand />
        <HomeCTA />
      </main>
      <Footer />
    </React.Fragment>
  );
}

Object.assign(window, { HomeApp });