/* ============================================================
   business.jsx — Business / franchise page sections
   ============================================================ */
const { useState: bsState } = React;

function BusinessHero({ onNav }) {
  return (
    <section className="hero">
      <div className="aura"></div>
      <div className="grid-bg"></div>
      <div className="blob" style={{ width: 380, height: 380, right: '-120px', top: '8%', background: 'var(--accent)' }}></div>
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <Reveal className="eyebrow" style={{}}>Franchise opportunity</Reveal>
            <h1 className="h-display reveal d1" style={{ marginTop: 22 }}>
              Low-investment business with a <span className="text-grad">fast start.</span>
            </h1>
            <p className="lead reveal d2" style={{ maxWidth: 480 }}>
              HelloCharge offers a turnkey franchise in the booming mobile-charging market — a refined operational model, full brand support and recurring revenue from day one.
            </p>
            <div className="hero-cta reveal d3">
              <button className="btn btn-primary" onClick={() => onNav('contact')}><Icon name="store" size={18} />Order a station</button>
              <button className="btn btn-ghost" onClick={() => onNav('stations')}><Icon name="layers" size={18} />See station types</button>
            </div>
            <div className="hero-meta reveal d4">
              <div><div className="hm-n text-grad"><Counter to={35} /></div><div className="hm-l">Active locations</div></div>
              <div><div className="hm-n text-grad"><Counter to={60} suffix="+" /></div><div className="hm-l">Partner brands</div></div>
              <div><div className="hm-n text-grad"><Counter to={48} /></div><div className="hm-l">Slots per station</div></div>
            </div>
          </div>
          <Reveal className="hero-visual d2">
            <div className="hero-ring" style={{ inset: '-26px' }}></div>
            <div className="img-frame">
              <img src="assets/marketing-station.jpg" alt="HelloCharge power bank in use" style={{ transform: 'scale(1.05)' }} />
            </div>
            <div className="fchip" style={{ left: '-30px', top: '52px', animation: 'floaty 6.5s ease-in-out infinite' }}>
              <div className="fi"><Icon name="trend" size={19} /></div>
              <div><div className="ft">Recurring</div><div className="fl">Passive revenue</div></div>
            </div>
            <div className="fchip" style={{ right: '-22px', bottom: '70px', animation: 'floaty 7.5s ease-in-out infinite .5s' }}>
              <div className="fi" style={{ background: 'var(--surface)', color: 'var(--accent-ink)', border: '1px solid var(--border)' }}><Icon name="shield" size={19} /></div>
              <div><div className="ft">Full support</div><div className="fl">We handle ops</div></div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function BusinessModel() {
  return (
    <section className="section tight">
      <div className="wrap">
        <Reveal className="card" style={{ padding: 'clamp(28px,4vw,52px)' }}>
          <span className="eyebrow">Business model</span>
          <h2 className="h2" style={{ marginTop: 16, maxWidth: 900 }}>Rental power banks where the crowds already are.</h2>
          <p className="lead" style={{ marginTop: 18, maxWidth: 980 }}>
            The model places rental power banks in high-traffic venues — restaurants, shopping centres, hotels, bars and amusement parks. Partners benefit from a refined operational playbook and comprehensive brand support, while growing demand for on-the-go power drives steady, scalable revenue.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

const WHY = [
  { ic: 'download', t: 'Low entry threshold', d: 'Start with a single station and scale at your own pace. Minimal upfront cost, no specialist staff required.' },
  { ic: 'layers', t: 'Simple business model', d: 'A clear, proven playbook. Place the station, plug it in, and let recurring rentals do the work.' },
  { ic: 'trend', t: 'Growing demand for charging', d: 'Phones die, people panic. The need for instant power keeps climbing year over year.' },
  { ic: 'globe', t: 'Scalable across venues', d: 'Restaurants, clubs, malls, events — the same station thrives everywhere there are people.' },
];
function WhyWorth() {
  return (
    <section className="section section--alt">
      <div className="wrap">
        <Reveal className="sec-head" style={{}}>
          <span className="eyebrow">Why is it worth it?</span>
          <h2 className="h2">A business that runs itself.</h2>
        </Reveal>
        <div className="feat-grid c4" style={{ marginTop: 46 }}>
          {WHY.map((w, i) => (
            <Reveal key={w.t} delay={`d${i + 1}`}>
              <div className="feat card hoverable spotlight" onMouseMove={useSpotlight()}>
                <div className="fi"><Icon name={w.ic} size={26} /></div>
                <h3 className="h3">{w.t}</h3>
                <p>{w.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const STATIONS = [
  {
    cap: 'Countertop', t: '8-Slot Station', short: 'Compact', img: 'assets/station-8-slot.png',
    tagline: 'A compact countertop unit that drops onto any bar top, reception desk or salon counter.',
    slots: 8, perBank: 22.5, weight: 7.5, draw: 150, drawPct: 18,
    screen: '10.1" touchscreen', dims: '240 × 215 × 420 mm', conn: '4G + Wi-Fi', temp: '0–40 °C', ip: 'Indoor use',
    connectors: ['USB-C', 'Lightning', 'Micro-USB'],
    payment: ['Card tap', 'QR code', 'NFC'],
    bestFor: ['Cafés', 'Bars', 'Salons', 'Clinics'],
  },
  {
    cap: 'Floor standing', t: '24-Slot Station', short: 'Standard', img: 'assets/station-24-waterproof-slot.png',
    tagline: 'A high-capacity floor unit with a large HD display for on-screen advertising and wayfinding.',
    slots: 24, perBank: 22.5, weight: 42, draw: 420, drawPct: 51,
    screen: '21.5" HD display', dims: '430 × 400 × 1500 mm', conn: '4G + Wi-Fi', temp: '0–40 °C', ip: 'Indoor use',
    connectors: ['USB-C', 'Lightning', 'Micro-USB'],
    payment: ['Card', 'QR code', 'NFC', 'App'],
    bestFor: ['Malls', 'Hotels', 'Airports', 'Offices'],
  },
  {
    cap: 'Ultra-capacity', t: '48-Slot Tower', short: 'Tower', img: 'assets/station-48-slot.png',
    tagline: 'Maximum throughput for the busiest venues — a 4K media tower that keeps a crowd powered.',
    slots: 48, perBank: 22.5, weight: 78, draw: 820, drawPct: 100,
    screen: '32" 4K display', dims: '550 × 480 × 1900 mm', conn: '5G + Wi-Fi', temp: '0–40 °C', ip: 'Indoor use',
    connectors: ['USB-C', 'Lightning', 'Micro-USB'],
    payment: ['Card', 'QR code', 'NFC', 'App'],
    bestFor: ['Stadiums', 'Transit hubs', 'Festivals', 'Events'],
  },
  {
    cap: 'Outdoor · IP65', t: 'Waterproof 24', short: 'Outdoor', img: 'assets/station-24-waterproof-slot.png',
    tagline: 'A weather-sealed, IP65-rated station built to run outdoors through rain, dust and heat.',
    slots: 24, perBank: 22.5, weight: 48, draw: 420, drawPct: 51,
    screen: '21.5" sunlight-readable', dims: '450 × 420 × 1500 mm', conn: '4G + Wi-Fi', temp: '−20–50 °C', ip: 'IP65 weatherproof',
    connectors: ['USB-C', 'Lightning', 'Micro-USB'],
    payment: ['Card', 'QR code', 'NFC', 'App'],
    bestFor: ['Festivals', 'Beaches', 'Markets', 'Terraces'],
  },
];

function StationCard({ s, onOpen }) {
  return (
    <button className="station card" onClick={onOpen} aria-label={`View specs for ${s.t}`}>
      <div className="st-top">
        <div className="badge-cap">{s.cap}</div>
        <h3>{s.t}</h3>
      </div>
      <div className="ph"><img src={s.img} alt={s.t} /></div>
      <div className="st-preview">
        <div className="st-mini"><b>{s.slots}</b><span>slots</span></div>
        <div className="st-mini"><b>{s.perBank}W</b><span>per bank</span></div>
        <div className="st-mini"><b>{s.weight}kg</b><span>weight</span></div>
      </div>
      <div className="st-cta">View full specs <Icon name="arrow" size={16} className="arrow" /></div>
      <div className="plusbtn"><Icon name="plus" size={18} /></div>
    </button>
  );
}

const SPEC_ROWS = (s) => [
  { ic: 'monitor', k: 'Display', v: s.screen },
  { ic: 'box', k: 'Dimensions', v: s.dims },
  { ic: 'weight', k: 'Weight', v: s.weight + ' kg' },
  { ic: 'wifi', k: 'Connectivity', v: s.conn },
  { ic: 'thermometer', k: 'Operating temp', v: s.temp },
  { ic: 'droplet', k: 'Protection', v: s.ip },
];

function StationModal({ station, onClose, onOrder }) {
  React.useEffect(() => {
    if (!station) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
  }, [station]);

  // animate gauge fill after open
  const [fill, setFill] = bsState(0);
  React.useEffect(() => {
    if (!station) { setFill(0); return; }
    const t = setTimeout(() => setFill(station.drawPct), 120);
    return () => clearTimeout(t);
  }, [station]);

  if (!station) return null;
  const s = station;
  return (
    <div className="smodal-back" onClick={onClose}>
      <div className="smodal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label={s.t}>
        <button className="smodal-x" onClick={onClose} aria-label="Close"><Icon name="close" size={18} /></button>
        <div className="smodal-media">
          <div className="smodal-stage">
            <div className="sm-aura"></div>
            <img src={s.img} alt={s.t} />
          </div>
          <div className="fchip sm-fc1"><div className="fi"><Icon name="battery" size={18} /></div><div><div className="ft">{s.slots}</div><div className="fl">Charged banks</div></div></div>
          <div className="fchip sm-fc2"><div className="fi" style={{ background: 'var(--surface)', color: 'var(--accent-ink)', border: '1px solid var(--border)' }}><Icon name="bolt" size={18} /></div><div><div className="ft">{s.perBank}W</div><div className="fl">Fast charge</div></div></div>
        </div>
        <div className="smodal-body">
          <div className="sm-stagger">
            <span className="badge-cap" style={{ fontSize: 12.5 }}>{s.cap}</span>
            <h3 className="h2" style={{ fontSize: 'clamp(26px,2.6vw,38px)', marginTop: 8 }}>{s.t}</h3>
            <p className="lead" style={{ marginTop: 12, fontSize: 16 }}>{s.tagline}</p>

            <div className="sm-keystats">
              <div className="sm-ks"><div className="sm-ksn text-grad"><Counter to={s.slots} /></div><div className="sm-ksl">Power bank slots</div></div>
              <div className="sm-ks"><div className="sm-ksn text-grad"><Counter to={s.perBank} decimals={1} suffix="W" /></div><div className="sm-ksl">Output per bank</div></div>
              <div className="sm-ks"><div className="sm-ksn text-grad"><Counter to={s.weight} decimals={1} suffix="kg" /></div><div className="sm-ksl">Unit weight</div></div>
            </div>

            <div className="gauge">
              <div className="gauge-head">
                <span className="gauge-lbl"><Icon name="gauge" size={17} /> Max power draw</span>
                <span className="gauge-val"><Counter to={s.draw} suffix=" W" /></span>
              </div>
              <div className="gauge-track"><div className="gauge-fill" style={{ width: fill + '%' }}></div></div>
              <div className="gauge-scale"><span>0 W</span><span>Eco when idle</span><span>820 W</span></div>
            </div>

            <div className="spec-table">
              {SPEC_ROWS(s).map((r) => (
                <div className="spec-row" key={r.k}>
                  <span className="spec-k"><span className="spec-ic"><Icon name={r.ic} size={16} /></span>{r.k}</span>
                  <span className="spec-v">{r.v}</span>
                </div>
              ))}
            </div>

            <div className="sm-group">
              <div className="sm-glabel"><Icon name="cable" size={15} /> Built-in connectors</div>
              <div className="row" style={{ gap: 10 }}>
                {s.connectors.map((c) => <span className="pay-badge" key={c} style={{ fontSize: 13, padding: '9px 14px' }}>{c}</span>)}
              </div>
            </div>
            <div className="sm-group">
              <div className="sm-glabel"><Icon name="card" size={15} /> Payment methods</div>
              <div className="row" style={{ gap: 10 }}>
                {s.payment.map((c) => <span className="pay-badge" key={c} style={{ fontSize: 13, padding: '9px 14px' }}>{c}</span>)}
              </div>
            </div>
            <div className="sm-group">
              <div className="sm-glabel"><Icon name="pin" size={15} /> Best for</div>
              <div className="row" style={{ gap: 8 }}>
                {s.bestFor.map((c) => <span className="st-tag" key={c}>{c}</span>)}
              </div>
            </div>

            <div className="row" style={{ marginTop: 26, gap: 12 }}>
              <button className="btn btn-primary" onClick={onOrder}><Icon name="store" size={18} />Order this station</button>
              <button className="btn btn-ghost" onClick={onOrder}>Request a quote<Icon name="arrow" size={18} className="arrow" /></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function StationTypes({ onContact }) {
  const [active, setActive] = bsState(null);
  return (
    <section className="section" id="stations">
      <div className="wrap">
        <Reveal className="sec-head" style={{}}>
          <span className="eyebrow">Station types</span>
          <h2 className="h2">Our charging stations.</h2>
          <p className="lead">From compact countertop units to ultra-capacity towers — hover to preview, click any station for full specs and power figures.</p>
        </Reveal>
        <div className="station-grid" style={{ marginTop: 48 }}>
          {STATIONS.map((s, i) => (
            <Reveal key={i} delay={`d${(i % 4) + 1}`}>
              <StationCard s={s} onOpen={() => setActive(i)} />
            </Reveal>
          ))}
        </div>
      </div>
      <StationModal station={active != null ? STATIONS[active] : null} onClose={() => setActive(null)} onOrder={() => { setActive(null); onContact && onContact(); }} />
    </section>
  );
}

function Locations() {
  return (
    <section className="section section--alt" id="map">
      <div className="wrap">
        <div className="media-2">
          <Reveal>
            <span className="eyebrow">Locations</span>
            <h2 className="h2" style={{ marginTop: 16 }}>It doesn't matter<br />where you are<br /><span className="text-grad">in Poland.</span></h2>
            <p className="lead" style={{ marginTop: 18 }}>
              Over <b><Counter to={35} /></b> locations across cities nationwide. Our stations live in restaurants, hotels, shops and venues — there's always a nearby spot to rent a power bank.
            </p>
            <h3 className="h3" style={{ marginTop: 30, marginBottom: 16 }}>Download our app</h3>
            <AppStoreButtons />
          </Reveal>
          <Reveal delay="d2">
            <PolandMap />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

const SUPPORT = [
  { ic: 'headset', t: 'Customer support', d: 'A dedicated team handles every rental question, so you never field a support call.' },
  { ic: 'wrench', t: 'All maintenance', d: 'Servicing, repairs and replacements are entirely on us — your station just works.' },
  { ic: 'refresh', t: 'Refill & restock', d: 'We keep every station stocked and balanced, so banks are always ready to rent.' },
];
function WhatWeOffer() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="media-2">
          <Reveal delay="d2">
            <div className="img-frame" style={{ aspectRatio: '4/4.4' }}>
              <img src="assets/marketing-1.jpg" alt="HelloCharge station banks" />
            </div>
          </Reveal>
          <Reveal>
            <span className="eyebrow">What we need</span>
            <h2 className="h2" style={{ marginTop: 16 }}>All we need is a plug.</h2>
            <p className="lead" style={{ marginTop: 16 }}>
              The only thing we ask is a power outlet and a visible spot in your venue. We bring everything else.
            </p>
            <h3 className="h3" style={{ marginTop: 34, marginBottom: 18 }}>What we offer</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {SUPPORT.map((s) => (
                <div key={s.t} className="card hoverable" style={{ padding: 20, display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                  <div className="fi" style={{ flex: '0 0 auto', width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: 'var(--accent-soft)', color: 'var(--accent-ink)' }}><Icon name={s.ic} size={22} /></div>
                  <div><div style={{ fontWeight: 800, fontSize: 17 }}>{s.t}</div><div className="muted" style={{ marginTop: 4, fontSize: 14.5, lineHeight: 1.5 }}>{s.d}</div></div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

const BRANDING = [
  {
    ic: 'monitor', t: 'Hardware branding',
    d: 'Our newest stations ship with a full HD touchscreen for on-screen branding and wayfinding. Their large, unobstructed side panels are perfect for advertising through custom stickers.',
    tags: ['Touchscreen ads', 'Side-panel stickers', 'Branded UI'],
  },
  {
    ic: 'battery', t: 'Powerbank branding',
    d: 'Customise every fast-charging power bank with your logo and company colours. A pocket-sized billboard that leaves your venue and travels the whole city in your customers\u2019 hands.',
    tags: ['Your logo', 'Company colours', 'Full wrap'],
  },
];
function CoBranding({ onContact }) {
  return (
    <section className="section" id="branding">
      <div className="wrap">
        <div className="media-2 brand-2">
          <Reveal className="brand-visual">
            <div className="brand-stage">
              <div className="grid-bg"></div>
              <div className="brand-aura"></div>
              <img src="assets/branding-customize.png" alt="HelloCharge station and power bank carrying a partner's logo and brand colours" />
            </div>
            <div className="fchip" style={{ left: '-26px', top: '40px', animation: 'floaty 6.5s ease-in-out infinite' }}>
              <div className="fi"><Icon name="spark" size={19} /></div>
              <div><div className="ft">Your brand</div><div className="fl">On every screen</div></div>
            </div>
            <div className="fchip" style={{ right: '-20px', bottom: '54px', animation: 'floaty 7.5s ease-in-out infinite .6s' }}>
              <div className="fi" style={{ background: 'var(--surface)', color: 'var(--accent-ink)', border: '1px solid var(--border)' }}><Icon name="battery" size={19} /></div>
              <div><div className="ft">Your logo</div><div className="fl">In every hand</div></div>
            </div>
          </Reveal>
          <Reveal delay="d2">
            <span className="eyebrow">Co-branding</span>
            <h2 className="h2" style={{ marginTop: 16 }}>Make every station <span className="text-grad">your own.</span></h2>
            <p className="lead" style={{ marginTop: 16, maxWidth: 520 }}>
              Every touchpoint is a canvas. Wrap our stations and power banks in your identity — logo, colours and on-screen content — and turn shared charging into a moving advert for your brand.
            </p>
            <div className="brand-feats">
              {BRANDING.map((b) => (
                <div key={b.t} className="brand-feat card hoverable">
                  <div className="bf-ic"><Icon name={b.ic} size={24} /></div>
                  <div className="bf-body">
                    <h3 className="h3">{b.t}</h3>
                    <p>{b.d}</p>
                    <div className="bf-tags">
                      {b.tags.map((t) => <span className="st-tag" key={t}>{t}</span>)}
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <div className="hero-cta" style={{ marginTop: 32 }}>
              <a className="btn btn-primary" href="assets/HelloCharge-brochure.pdf" download="HelloCharge-brochure.pdf"><Icon name="download" size={18} />Download the brochure</a>
              <button className="btn btn-ghost" onClick={onContact}>Talk to our brand team<Icon name="arrow" size={18} className="arrow" /></button>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { BusinessHero, BusinessModel, WhyWorth, StationTypes, CoBranding, Locations, WhatWeOffer });