/* YADEA MAURITIUS — exclusive Tamak distributor */

const Yadea = ({ go }) => {
  return (
    <main className="page-enter yadea-scope" style={{ background: "var(--paper)", color: "var(--ink)" }}>
      <YadeaBrandStrip go={go} />
      <YadeaHero />
      <YadeaStats />
      <YadeaLineup />
      <YadeaTech />
      <YadeaFleets go={go} />
      <YadeaService />
      <YadeaLocations />
      <YadeaBackToTamak go={go} />
    </main>
  );
};

const YadeaBrandStrip = ({ go }) => (
  <div style={{ background: "#FFF", borderBottom: "1px solid var(--line)", padding: "14px 0" }}>
    <div className="shell-wide" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
        <YadeaWordmark />
        <span style={{ width: 1, height: 18, background: "var(--line-strong)" }} />
        <a onClick={() => go("home")} style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--mute)", cursor: "pointer" }}>
          ← Distributed by Tamak Group
        </a>
      </div>
      <div style={{ display: "flex", gap: 6, alignItems: "center", fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase" }}>
        <a style={{ padding: "6px 12px", borderRadius: 999, background: "var(--ink)", color: "var(--paper)" }}>Mauritius</a>
        <a style={{ padding: "6px 12px", color: "var(--mute)" }}>Reunion</a>
        <a style={{ padding: "6px 12px", color: "var(--mute)" }}>Rodrigues</a>
      </div>
    </div>
  </div>
);

const YadeaWordmark = () => (
  <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
    <svg width="32" height="32" viewBox="0 0 40 40">
      <rect width="40" height="40" rx="8" fill="#0F172A" />
      <path d="M12 14 L20 22 L28 14 M20 22 L20 28" stroke="#FFF" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
    <div style={{ display: "flex", flexDirection: "column", lineHeight: 0.9 }}>
      <span style={{ fontFamily: "var(--f-display)", fontSize: 22, fontWeight: 700, letterSpacing: "0.04em" }}>YADEA</span>
      <span style={{ fontFamily: "var(--f-mono)", fontSize: 8, letterSpacing: "0.2em", color: "var(--mute)", textTransform: "uppercase", marginTop: 2 }}>Mauritius</span>
    </div>
  </div>
);

const YadeaHero = () => (
  <section style={{ position: "relative", paddingTop: 56, paddingBottom: 96 }}>
    <div className="shell-wide">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 32, flexWrap: "wrap", gap: 12 }}>
        <Tag dot style={{ borderColor: "#CC1B2B", color: "#CC1B2B" }}>● Yadea Mauritius · Exclusive Tamak distributor</Tag>
        <Tag style={{ background: "#0F172A", color: "#FFF", border: "none" }}>Global #1 e-mobility · 9 consecutive years</Tag>
      </div>

      <h1 className="display-hero" style={{ letterSpacing: "-0.045em" }}>
        Electrify<br />
        your <span className="serif" style={{ fontStyle: "italic", color: "#CC1B2B" }}>commute.</span>
      </h1>

      <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 48, alignItems: "center" }} className="yadea-hero-grid">
        <div>
          <p style={{ fontSize: 18, color: "var(--mute)", lineHeight: 1.55, maxWidth: 480, marginBottom: 32 }}>
            Tamak Group is the exclusive distributor of Yadea in Mauritius — the world's No.1 electric two-wheeler brand. Personal commuters, delivery & business fleets, two-year battery warranty, and reliable after-sales service from our Coromandel workshop.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12, marginBottom: 32 }}>
            <HeroSpec icon={<Icon.Speed />} value="65" unit="km/h" label="Top speed" />
            <HeroSpec icon={<Icon.Battery />} value="75" unit="km" label="Range" />
            <HeroSpec icon={<Icon.Bolt />} value="6h" unit="" label="Full charge" />
          </div>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <Btn kind="orange" size="lg">Book a test ride</Btn>
            <Btn kind="ghost" size="lg" icon={<Icon.Play size={11} />}>Watch the film</Btn>
          </div>
        </div>

        {/* Hero image — mint Yadea hero shot */}
        <div style={{ position: "relative", borderRadius: 28, overflow: "hidden", background: "linear-gradient(160deg, #E8F2F4 0%, #C8DDE3 100%)", aspectRatio: "1.1/1", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <img src="assets/yadea/hero-mint.png" alt="Yadea mint electric scooter" style={{ width: "100%", height: "100%", display: "block", objectFit: "cover" }} />
          <div style={{ position: "absolute", top: 20, left: 20 }}>
            <Tag style={{ background: "rgba(255,255,255,0.95)", color: "#0F172A", border: "none" }}>● Featured · Mint Edition</Tag>
          </div>
        </div>
      </div>
    </div>

    <style>{`
      @media (max-width: 900px) { .yadea-hero-grid { grid-template-columns: 1fr !important; } }
    `}</style>
  </section>
);

const HeroSpec = ({ icon, value, unit, label }) => (
  <div style={{ background: "#F8FAFC", borderRadius: 14, padding: 16, border: "1px solid var(--line)" }}>
    <div style={{ color: "#CC1B2B", marginBottom: 12 }}>{icon}</div>
    <div style={{ fontFamily: "var(--f-display)", fontSize: 28, fontWeight: 500, letterSpacing: "-0.03em", lineHeight: 1 }}>
      {value}<span style={{ fontSize: 12, color: "var(--mute)", marginLeft: 2 }}>{unit}</span>
    </div>
    <div style={{ marginTop: 4, fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--mute)" }}>
      {label}
    </div>
  </div>
);

const YadeaStats = () => (
  <section style={{ padding: "72px 0", background: "#0F172A", color: "#FFF" }}>
    <div className="shell-wide">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }} className="ya-stats">
        {[
          { n: 80,   suffix: "+",  label: "Countries" },
          { n: 70,   suffix: "M",  label: "Riders worldwide" },
          { n: 9,    suffix: "yrs", label: "Global #1 in sales" },
          { n: 1300, suffix: "+",  label: "Patents" },
        ].map((s, i) => (
          <Reveal key={i} delay={i * 80}>
            <div style={{ borderTop: "2px solid #CC1B2B", paddingTop: 16 }}>
              <div style={{ fontFamily: "var(--f-display)", fontSize: "clamp(44px, 5vw, 76px)", fontWeight: 500, letterSpacing: "-0.035em", lineHeight: 1, color: "#FFF" }}>
                <CountUp to={s.n} suffix={s.suffix} />
              </div>
              <div style={{ marginTop: 6, fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(255,255,255,0.6)" }}>
                {s.label}
              </div>
            </div>
          </Reveal>
        ))}
      </div>
      <style>{`@media (max-width: 700px) { .ya-stats { grid-template-columns: 1fr 1fr !important; } }`}</style>
    </div>
  </section>
);

const YadeaLineup = () => {
  const [active, setActive] = React.useState("epoc");
  const models = [
    { id: "epoc",    name: "EPOC-H",     tagline: "Effortless ride, limitless joy",       price: "Rs 109,900", speed: 60, range: 80,  power: "1200W", color: "#0EA5A0", image: "assets/yadea/epoc.png",  category: "E-scooter · commuter" },
    { id: "m6",      name: "M6 H",       tagline: "Classic style, modern ride",           price: "Rs 69,900",  speed: 45, range: 70,  power: "1200W", color: "#CC1B2B", image: "assets/yadea/m6.png",    category: "E-moped · vintage" },
    { id: "gt60",    name: "GT60 + BOX", tagline: "Your perfect business partner",        price: "Rs 99,900",  speed: 50, range: 90,  power: "1500W", color: "#F59E0B", image: "assets/yadea/gt60.png",  category: "E-delivery · fleet" },
    { id: "cs600",   name: "CS 600",     tagline: "Sports-style electric assist bicycle", price: "Rs 89,900",  speed: 25, range: 80,  power: "250W",  color: "#7C3AED", image: "assets/yadea/cs600.png", category: "E-bicycle · urban" },
    { id: "starto",  name: "Starto",     tagline: "Fold · Carry · Ride",                   price: "Rs 24,900",  speed: 25, range: 30,  power: "350W",  color: "#2A6FDB", image: "assets/yadea/starto.png",category: "Kick scooter · urban" },
  ];
  const m = models.find((x) => x.id === active);

  return (
    <section className="section">
      <div className="shell-wide">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 40, flexWrap: "wrap", gap: 24 }}>
          <div>
            <Eyebrow dot color="#CC1B2B">The lineup</Eyebrow>
            <h2 className="display-xl" style={{ marginTop: 16, maxWidth: 720 }}>
              Five rides.<br />
              <span className="serif" style={{ fontStyle: "italic", color: "#CC1B2B" }}>One</span> for every commute.
            </h2>
          </div>
          <div style={{ fontSize: 14, color: "var(--mute)", maxWidth: 360 }}>
            From kick scooters to delivery fleet bikes, every Yadea sold in Mauritius is serviced by Tamak's Coromandel workshop with a 2-year battery warranty.
          </div>
        </div>

        <div style={{ display: "flex", gap: 8, marginBottom: 32, flexWrap: "wrap" }}>
          {models.map(model => (
            <button key={model.id} onClick={() => setActive(model.id)} style={{
              background: active === model.id ? "var(--ink)" : "transparent",
              color: active === model.id ? "var(--paper)" : "var(--ink)",
              border: `1px solid ${active === model.id ? "var(--ink)" : "var(--line-strong)"}`,
              borderRadius: 999, padding: "10px 18px", cursor: "pointer", fontFamily: "var(--f-display)",
              fontSize: 16, letterSpacing: "-0.01em", display: "inline-flex", alignItems: "center", gap: 10,
            }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: model.color }} />
              {model.name}
            </button>
          ))}
        </div>

        <div style={{ background: "#FFF", border: "1px solid var(--line)", borderRadius: 24, overflow: "hidden", display: "grid", gridTemplateColumns: "1.2fr 1fr", minHeight: 480 }} className="model-card">
          <div style={{ position: "relative", background: `linear-gradient(160deg, ${m.color}1A, #F8FAFC)`, display: "flex", alignItems: "center", justifyContent: "center", padding: 32 }}>
            <img src={m.image} alt={`Yadea ${m.name}`} style={{ width: "100%", maxWidth: 560, height: "auto", objectFit: "contain" }} />
            <div style={{ position: "absolute", top: 24, left: 24 }}>
              <Tag style={{ background: m.color, color: "#FFF", border: "none" }}>● {m.category}</Tag>
            </div>
            <div style={{ position: "absolute", bottom: 24, right: 24, fontFamily: "var(--f-display)", fontSize: 160, fontWeight: 700, letterSpacing: "-0.06em", opacity: 0.05, lineHeight: 1, color: m.color }}>
              {m.name.split(" ")[0]}
            </div>
          </div>
          <div className="model-info" style={{ padding: 40, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
            <div>
              <Eyebrow color={m.color}>● {m.tagline.toUpperCase()}</Eyebrow>
              <div className="model-name" style={{ fontFamily: "var(--f-display)", fontSize: "clamp(48px, 9vw, 88px)", fontWeight: 500, letterSpacing: "-0.04em", lineHeight: 0.9, marginTop: 12, wordBreak: "break-word" }}>
                YADEA<br />{m.name}
              </div>
              <div style={{ marginTop: 16, fontFamily: "var(--f-display)", fontSize: "clamp(20px, 4vw, 26px)", color: "var(--ink)", letterSpacing: "-0.015em" }}>
                From <span style={{ color: m.color }}>{m.price}</span>
              </div>
            </div>

            <div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginTop: 32, marginBottom: 24, borderTop: "1px solid var(--line)", paddingTop: 24 }}>
                <SpecMini label="Top speed" value={`${m.speed}`} unit="km/h" />
                <SpecMini label="Range" value={`${m.range}`} unit="km" />
                <SpecMini label="Motor" value={m.power} unit="" />
              </div>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                <Btn kind="ink" style={{ background: m.color, color: "#FFF" }}>Configure</Btn>
                <Btn kind="ghost">Book test ride</Btn>
              </div>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 900px) {
            .model-card { grid-template-columns: 1fr !important; }
            .model-card > div:first-child { min-height: 320px; }
            .model-card .model-info { padding: 28px !important; }
          }
        `}</style>
      </div>
    </section>
  );
};

const SpecMini = ({ label, value, unit }) => (
  <div>
    <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--mute)" }}>{label}</div>
    <div style={{ fontFamily: "var(--f-display)", fontSize: 26, fontWeight: 500, letterSpacing: "-0.025em", marginTop: 4 }}>
      {value}<span style={{ fontSize: 13, color: "var(--mute)", marginLeft: 3 }}>{unit}</span>
    </div>
  </div>
);

const YadeaTech = () => {
  const techs = [
    { icon: <Icon.Bolt />,    title: "TTFAR 6.0",     body: "Yadea's proprietary energy system: high-efficiency motor, low-resistance tyres, energy-retrieving controller." },
    { icon: <Icon.Battery />, title: "LFP Battery",   body: "Lithium iron phosphate cells — safer than lithium-ion, longer lifespan, built for tropical climates." },
    { icon: <Icon.Speed />,   title: "Regen Braking", body: "Every brake recovers energy. Less brake wear, more range, smoother stops in Port Louis traffic." },
    { icon: <Icon.Shield />,  title: "Smart Security",body: "Bluetooth keyless unlock, GPS tracking, anti-theft alarm and remote disable — via the Yadea app." },
  ];
  return (
    <section className="section" style={{ background: "#F8FAFC", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="shell-wide">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end", marginBottom: 56 }} className="tech-head">
          <div>
            <Eyebrow dot color="#CC1B2B">Engineered to last</Eyebrow>
            <h2 className="display-xl" style={{ marginTop: 16 }}>
              The tech that<br />
              keeps you <span className="serif" style={{ fontStyle: "italic", color: "#CC1B2B" }}>moving.</span>
            </h2>
          </div>
          <div style={{ fontSize: 17, color: "var(--mute)", lineHeight: 1.55, maxWidth: 480 }}>
            Yadea holds 1,300+ patents and operates seven R&D centres across China and Vietnam. Every model Tamak sells in Mauritius is built on the same global platform.
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }} className="tech-grid">
          {techs.map((t, i) => (
            <div key={i} style={{ background: "#FFF", borderRadius: 20, padding: 28, minHeight: 260, display: "flex", flexDirection: "column", justifyContent: "space-between", border: "1px solid var(--line)" }}>
              <div style={{ width: 48, height: 48, borderRadius: 999, background: "#CC1B2B", color: "#FFF", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                {t.icon}
              </div>
              <div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 24, letterSpacing: "-0.02em", marginBottom: 10 }}>{t.title}</div>
                <div style={{ fontSize: 14, color: "var(--mute)", lineHeight: 1.5 }}>{t.body}</div>
              </div>
            </div>
          ))}
        </div>

        <style>{`
          @media (max-width: 900px) {
            .tech-head { grid-template-columns: 1fr !important; gap: 24px !important; }
            .tech-grid { grid-template-columns: 1fr 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
};

const YadeaFleets = ({ go }) => (
  <section className="section">
    <div className="shell-wide">
      <div style={{ background: "#0F172A", color: "#FFF", borderRadius: 28, padding: 56, display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48, alignItems: "center" }} className="fleet-card">
        <div>
          <Eyebrow color="#FFB4BB">For business · delivery, corporate, government</Eyebrow>
          <h2 className="display-xl" style={{ marginTop: 16, color: "#FFF" }}>
            Yadea<br />
            <span className="serif" style={{ fontStyle: "italic", color: "#FFB4BB" }}>for fleets.</span>
          </h2>
          <p style={{ marginTop: 16, fontSize: 16, color: "rgba(255,255,255,0.75)", maxWidth: 460, lineHeight: 1.55 }}>
            Tamak supplies and services electric fleets for Mauritian delivery companies, corporate fleets, and government contracts. From 5 bikes to 500 — same desk, same warranty.
          </p>
          <div style={{ marginTop: 28, display: "flex", gap: 10, flexWrap: "wrap" }}>
            <Btn kind="orange" size="lg" onClick={() => go("b2b")}>Talk to the fleet desk</Btn>
            <a className="btn btn-lg" style={{ background: "transparent", color: "#FFF", border: "1px solid rgba(255,255,255,0.4)", cursor: "pointer" }}>Download spec sheet</a>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          {[
            { n: "5–500", l: "Fleet sizes" },
            { n: "2 yrs",  l: "Battery warranty" },
            { n: "48hr",   l: "Service turnaround" },
            { n: "Rs 2",   l: "Per km cost" },
          ].map((s, i) => (
            <div key={i} style={{ background: "rgba(255,255,255,0.05)", borderRadius: 16, padding: 24, border: "1px solid rgba(255,255,255,0.1)" }}>
              <div style={{ fontFamily: "var(--f-display)", fontSize: 36, fontWeight: 500, letterSpacing: "-0.025em", color: "#FFB4BB" }}>{s.n}</div>
              <div style={{ marginTop: 4, fontSize: 13, color: "rgba(255,255,255,0.6)" }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .fleet-card { grid-template-columns: 1fr !important; padding: 32px !important; } }`}</style>
    </div>
  </section>
);

const YadeaService = () => {
  const items = [
    { n: "01", title: "2-year battery warranty", body: "Every Yadea sold in Mauritius comes with full battery warranty, parts and labour included." },
    { n: "02", title: "Coromandel workshop",    body: "On-island service at Tamak HQ. No 6-week wait. Most repairs done within 48 hours." },
    { n: "03", title: "Genuine parts in stock", body: "Direct shipping from Yadea Wuxi. We hold inventory so you don't queue." },
    { n: "04", title: "Tamak finance",          body: "Lease and purchase plans through our long-standing banking partners. Approval in 48 hours." },
  ];
  return (
    <section className="section" style={{ background: "#F8FAFC" }}>
      <div className="shell-wide">
        <Eyebrow dot color="#CC1B2B">Owning a Yadea in Mauritius</Eyebrow>
        <h2 className="display-xl" style={{ marginTop: 16, maxWidth: 820 }}>
          The bike is the easy part. <span className="serif" style={{ fontStyle: "italic" }}>Owning it,</span> Tamak makes easier.
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginTop: 56 }} className="svc-grid">
          {items.map(it => (
            <div key={it.n} style={{ borderTop: "2px solid var(--ink)", paddingTop: 20 }}>
              <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, color: "var(--mute)", letterSpacing: "0.1em" }}>{it.n}</div>
              <div style={{ fontFamily: "var(--f-display)", fontSize: 24, letterSpacing: "-0.025em", marginTop: 12 }}>{it.title}</div>
              <div style={{ fontSize: 14, color: "var(--mute)", marginTop: 10, lineHeight: 1.55 }}>{it.body}</div>
            </div>
          ))}
        </div>

        <style>{`@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
      </div>
    </section>
  );
};

/* Real Yadea Mauritius locations — from yadea.mu Store Locator (blank-13.html). */
const YadeaLocations = () => {
  const locations = [
    {
      name: "Yadea Flagship Store",
      address: "Royal Road, Port Louis (former Bata shop)",
      type: "Showroom · Sales",
      icon: <Icon.Pin size={16} />,
    },
    {
      name: "Yadea Kiosk · Tribeca Mall",
      address: "Food Court Alley (opposite the pharmacy), Trianon",
      type: "Showroom · Test rides",
      icon: <Icon.Pin size={16} />,
    },
    {
      name: "Yadea Service Centre",
      address: "2, Royal Road, Coromandel (Tamak Group HQ)",
      type: "Service · Spare parts",
      icon: <Icon.Battery size={16} />,
    },
  ];
  return (
    <section className="section">
      <div className="shell-wide">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 32, flexWrap: "wrap", gap: 16 }}>
          <div>
            <Eyebrow dot color="#CC1B2B">Visit Yadea Mauritius</Eyebrow>
            <h2 className="display-xl" style={{ marginTop: 16, maxWidth: 720 }}>
              Three doors. <em className="serif" style={{ fontStyle: "italic" }}>One island.</em>
            </h2>
          </div>
          <a href="https://wa.me/2305936930" target="_blank" rel="noopener noreferrer" className="btn btn-lg" style={{ background: "#25D366", color: "#FFF" }}>
            <Icon.WhatsApp size={14} /> Chat on WhatsApp
          </a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }} className="yloc-grid">
          {locations.map((l, i) => (
            <div key={i} style={{ background: "#FFF", border: "1px solid var(--line)", borderRadius: 20, padding: 28, display: "flex", flexDirection: "column", gap: 16, minHeight: 200 }}>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 10, color: "#CC1B2B", fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase" }}>
                {l.icon} {l.type}
              </div>
              <div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 24, letterSpacing: "-0.02em", lineHeight: 1.2 }}>{l.name}</div>
                <div style={{ fontSize: 14, color: "var(--mute)", marginTop: 10, lineHeight: 1.5 }}>{l.address}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 32, padding: 28, background: "#0F172A", color: "#FFF", borderRadius: 20, display: "flex", gap: 32, flexWrap: "wrap", alignItems: "center", justifyContent: "space-between" }}>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 28, fontSize: 14 }}>
            <a href="tel:+2302330020" style={{ display: "inline-flex", alignItems: "center", gap: 10, color: "#FFF", textDecoration: "none" }}>
              <Icon.Phone size={16} /> <span style={{ fontFamily: "var(--f-mono)" }}>+230 233 0020</span>
            </a>
            <a href="mailto:info@yadea.mu" style={{ display: "inline-flex", alignItems: "center", gap: 10, color: "#FFF", textDecoration: "none" }}>
              <Icon.Mail size={16} /> info@yadea.mu
            </a>
          </div>
          <div style={{ display: "flex", gap: 12 }}>
            <a href="https://instagram.com/yadea_mauritius" target="_blank" rel="noopener noreferrer" aria-label="Instagram" style={{ color: "#FFF", opacity: 0.8 }}><Icon.Instagram size={18} /></a>
            <a href="https://facebook.com/profile.php?id=61578977105527" target="_blank" rel="noopener noreferrer" aria-label="Facebook" style={{ color: "#FFF", opacity: 0.8 }}><Icon.Facebook size={18} /></a>
            <a href="https://tiktok.com/@yadea.mauritius" target="_blank" rel="noopener noreferrer" aria-label="TikTok" style={{ color: "#FFF", opacity: 0.8 }}><Icon.TikTok size={18} /></a>
          </div>
        </div>

        <style>{`@media (max-width: 900px) { .yloc-grid { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </section>
  );
};

const YadeaBackToTamak = ({ go }) => (
  <section style={{ padding: "80px 0", borderTop: "1px solid var(--line)" }}>
    <div className="shell-wide">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
        <div>
          <Eyebrow>Yadea Mauritius is part of the Tamak Group portfolio</Eyebrow>
          <div className="display-lg" style={{ marginTop: 12 }}>Discover the rest of the group.</div>
        </div>
        <Btn kind="ink" size="lg" onClick={() => go("home")}>
          Back to Tamak Group <Icon.ArrowRight size={14} />
        </Btn>
      </div>
    </div>
  </section>
);

window.Yadea = Yadea;
