/* B2B page — real Tamak B2B services */
const B2B = ({ go }) => {
  return (
    <main className="page-enter">
      {/* Hero with photo */}
      <section style={{ position: "relative", minHeight: 540, display: "flex", alignItems: "center", overflow: "hidden" }}>
        <div aria-hidden style={{
          position: "absolute", inset: 0,
          backgroundImage: `linear-gradient(180deg, rgba(15,23,42,0.45), rgba(15,23,42,0.78)), url(assets/together-tomorrow.png)`,
          backgroundSize: "cover", backgroundPosition: "center",
        }} />
        <div className="shell-wide" style={{ position: "relative", padding: "80px 32px" }}>
          <Eyebrow dot color="#CC1B2B">Tamak for Business</Eyebrow>
          <h1 className="display-hero" style={{ color: "#FFF", marginTop: 24, maxWidth: 1100 }}>
            Powering<br />
            <span className="serif" style={{ fontStyle: "italic", color: "#FFB4BB" }}>business growth.</span>
          </h1>
          <p style={{ marginTop: 24, fontSize: 19, color: "rgba(255,255,255,0.85)", maxWidth: 620, lineHeight: 1.5 }}>
            We provide businesses with solutions for a fast-changing world — point of sale, distribution, ecological products, and electric mobility, all from one Mauritian partner.
          </p>
          <div style={{ marginTop: 32, display: "flex", gap: 10, flexWrap: "wrap" }}>
            <Btn kind="orange" size="lg" onClick={() => go("contact")}>Request a quote</Btn>
            <a className="btn btn-lg" style={{ background: "rgba(255,255,255,0.1)", color: "#FFF", border: "1px solid rgba(255,255,255,0.35)", cursor: "pointer" }}>
              Download capabilities deck
            </a>
          </div>
        </div>
      </section>

      {/* Services grid */}
      <section className="section">
        <div className="shell-wide">
          <div style={{ textAlign: "center", marginBottom: 56 }}>
            <Eyebrow dot color="#CC1B2B">Our B2B solutions</Eyebrow>
            <h2 className="display-xl" style={{ marginTop: 16 }}>Four units. One desk.</h2>
            <div style={{ width: 80, height: 3, background: "#CC1B2B", borderRadius: 999, margin: "20px auto 0" }} />
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }} className="b2b-services">
            {[
              { k: "posterita", title: "Posterita POS Systems",  icon: <PosIcon />,    desc: "Advanced point-of-sale solutions for modern Mauritian retailers — cloud-based, real-time analytics, multi-location support and integrated inventory.", bullets: ["Cloud-based technology", "Real-time analytics", "Multi-location support", "Inventory management"] },
              { k: "distrib",   title: "Distribution & Logistics", icon: <TruckIcon />,  desc: "Comprehensive supply chain solutions across Mauritius — warehouse management, nationwide delivery, and supply-chain optimization for FMCG, pharma and retail.", bullets: ["Nationwide delivery", "Warehouse management", "Supply chain optimization", "Custom logistics"] },
              { k: "eco",       title: "Ecological Products",   icon: <LeafIcon />,   desc: "Sustainable solutions for environmentally conscious businesses — eco-friendly materials, sustainable packaging and green alternatives sourced through Tamak's networks.", bullets: ["Eco-friendly materials", "Sustainable packaging", "Green alternatives", "Environmental consulting"] },
              { k: "fleet",     title: "Yadea Electric Fleets", icon: <BoltIcon />,   desc: "Electric mobility solutions for delivery, corporations, and government — fleet purchase, maintenance support, training, and lower operating costs.", bullets: ["Fleet management", "Maintenance support", "Training programs", "Cost-effective operations"] },
            ].map((s, i) => (
              <div key={s.k} style={{ background: "#FFF", border: "1px solid var(--line)", borderRadius: 24, padding: 36, minHeight: 380, display: "flex", flexDirection: "column", justifyContent: "space-between", transition: "all 0.3s ease" }}
                onMouseEnter={(e) => { e.currentTarget.style.boxShadow = "0 24px 48px -16px rgba(15,23,42,0.12)"; e.currentTarget.style.transform = "translateY(-4px)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.transform = "translateY(0)"; }}
              >
                <div>
                  <div style={{ width: 64, height: 64, borderRadius: 18, background: "#FEE2E2", color: "#CC1B2B", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 24 }}>
                    {s.icon}
                  </div>
                  <h3 style={{ fontFamily: "var(--f-display)", fontSize: 32, letterSpacing: "-0.025em", marginBottom: 12, fontWeight: 500 }}>{s.title}</h3>
                  <p style={{ fontSize: 15, color: "var(--mute)", lineHeight: 1.55, marginBottom: 20 }}>{s.desc}</p>
                  <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                    {s.bullets.map((b, j) => (
                      <li key={j} style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 14 }}>
                        <span style={{ width: 6, height: 6, borderRadius: 999, background: "#CC1B2B" }} />
                        {b}
                      </li>
                    ))}
                  </ul>
                </div>
                <button onClick={() => go("contact")} className="btn btn-ink" style={{ width: "100%", justifyContent: "center", marginTop: 28 }}>
                  Get a quote <Icon.ArrowRight size={14} />
                </button>
              </div>
            ))}
          </div>
          <style>{`@media (max-width: 800px) { .b2b-services { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>

      {/* Why partner */}
      <section className="section" style={{ background: "#F8FAFC" }}>
        <div className="shell-wide">
          <div style={{ textAlign: "center", marginBottom: 48 }}>
            <Eyebrow dot color="#CC1B2B">Why partner with Tamak</Eyebrow>
            <h2 className="display-xl" style={{ marginTop: 16 }}>Forty years of doing it right.</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="why-grid">
            {[
              { n: 40, suffix: "+", label: "Years experience" },
              { n: TAMAK_TOTAL_STORES, suffix: "", label: "Retail locations" },
              { n: 175, suffix: "", label: "Team members" },
            ].map((s, i) => (
              <div key={i} style={{ textAlign: "center" }}>
                <div style={{ fontFamily: "var(--f-display)", fontSize: "clamp(56px, 7vw, 96px)", fontWeight: 500, letterSpacing: "-0.035em", color: "#CC1B2B", lineHeight: 1 }}>
                  <CountUp to={s.n} suffix={s.suffix} duration={1600} />
                </div>
                <div style={{ marginTop: 12, fontSize: 15, color: "var(--mute)" }}>{s.label}</div>
              </div>
            ))}
          </div>
          <div style={{ textAlign: "center", marginTop: 48 }}>
            <Btn kind="orange" size="lg" onClick={() => go("contact")}>Start your partnership</Btn>
          </div>
          <style>{`@media (max-width: 700px) { .why-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
        </div>
      </section>
    </main>
  );
};

/* B2B-specific icons */
const PosIcon = () => (
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
    <rect x="2" y="3" width="20" height="14" rx="2" />
    <line x1="8" y1="21" x2="16" y2="21" />
    <line x1="12" y1="17" x2="12" y2="21" />
  </svg>
);
const TruckIcon = () => (
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
    <path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2" />
    <path d="M15 18H9" />
    <path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" />
    <circle cx="17" cy="18" r="2" />
    <circle cx="7" cy="18" r="2" />
  </svg>
);
const LeafIcon = () => (
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
    <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" />
    <path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" />
  </svg>
);
const BoltIcon = () => (
  <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
    <path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" />
  </svg>
);

window.B2B = B2B;