/* Brand sub-page template — real Tamak retail brands */

const BRAND_CONTENT = {
  adopt: {
    long: "The French leader in affordable perfumes, in Mauritius since 2013.",
    blurb: "Tamak operates a nationwide network of Adopt' stores, offering accessible, French-made fragrances and personal care. Adopt' has become a favourite among Mauritians for its quality, variety, and affordability — eaux de parfum from €15, made in Bordeaux, with botanical essences from Grasse.",
    franchise: "Franchised in 2013 · Rebranded from Reserve Naturelle",
    promise: "Accessible quality, French heritage, refillable program.",
    highlights: [
      "120+ eaux de parfum from Bordeaux, France",
      "90% naturally-derived ingredients",
      "Refillable program — 30% off on second purchase",
      "Make-up, body care, and fashion accessories",
    ],
    products: [
      { name: "Coeur de Rubis",  desc: "Eau de parfum · 30ml", price: "Rs 1,290", image: "assets/brands/adopt-hero.jpg" },
      { name: "Bahia Samba",     desc: "Eau de parfum · 30ml", price: "Rs 1,190", image: "assets/brands/adopt-bahia.jpg" },
      { name: "Lovemood Intense", desc: "Eau de parfum · 50ml", price: "Rs 1,890", image: "assets/brands/adopt-lovemood.jpg" },
      { name: "Dubai Palace",     desc: "Eau de parfum · 30ml", price: "Rs 1,290", image: "assets/brands/adopt-dubai.jpg" },
    ],
    storeImage: "assets/brand-adopt.png",
    /* Boutiques across Mauritius — confirmed by Tamak.
       The brand publishes mall names only — no per-store phones. */
    stores: [
      { name: "Bagatelle Mall",             area: "Moka" },
      { name: "La City Trianon",            area: "Trianon" },
      { name: "Tribeca Mall",               area: "Trianon" },
      { name: "Phoenix Mall",               area: "Phoenix" },
      { name: "Riche Terre Mall",           area: "Riche Terre" },
      { name: "Les Arcades Currimjee",      area: "Chasteauneuf, Curepipe" },
      { name: "Curepipe Chateauneuf",       area: "Curepipe" },
      { name: "Victoria Urban Terminal",    area: "Port Louis" },
      { name: "Rue Bourbon",                area: "Port Louis" },
      { name: "Victoria Mall",              area: "Quatre Bornes" },
      { name: "Mahogany Shopping Promenade",area: "Bagatelle" },
      { name: "Coeur de Ville Goodlands",   area: "North" },
      { name: "Super U Goodlands",          area: "North" },
      { name: "La Croisette",               area: "Grand Baie" },
      { name: "Coeur de Ville Grand Baie",  area: "Grand Baie" },
      { name: "Super U Grand Baie",         area: "Grand Baie" },
      { name: "Bo Vallon Shopping Mall",    area: "Bo Vallon" },
      { name: "Rose Hill",                  area: "Rose Hill" },
      { name: "Cascavelle",                 area: "Flic en Flac" },
      { name: "Plaisance Shopping Village", area: "Plaisance" },
    ],
  },
  citadel: {
    long: "Feel Great Anywhere. Mauritian lifestyle apparel since 1983.",
    blurb: "Since 1983, Citadel has created clothing inspired by Mauritian pride, comfort, and lifestyle. What began as printed souvenir T-shirts launched from Emmanuel Tsang Mang Kin's garage has evolved into an upmarket island brand offering apparel for the whole family — premium fabrics, considered cuts, made for the climate.",
    franchise: "Founded by Emmanuel Tsang Mang Kin · 100% Tamak owned",
    promise: "Designed and made in Mauritius. Built for the climate.",
    highlights: [
      "Founded 1983 — Tamak's original brand",
      "Designed in Coromandel, made by Tamak Textile",
      "Family-wide collections — men, women, children",
      "Market leader in Mauritian souvenir & lifestyle apparel",
    ],
    products: [
      { name: "Floral Maxi Dress",  desc: "Festive collection",     price: "Rs 2,490", image: "assets/brands/citadel-tee.png" },
      { name: "Tropical Shirt Dress",desc: "Garden collection · SS26", price: "Rs 2,290", image: "assets/brands/citadel-tee-3.png" },
      { name: "Linen Polo · White",  desc: "Knit polo · men",       price: "Rs 1,490", image: "assets/brands/citadel-tee-4.png" },
      { name: "Spring Print Dress",  desc: "Capsule · SS26",        price: "Rs 1,990", image: "assets/brands/citadel-tee-2.png" },
    ],
    storeImage: "assets/brand-citadel.png",
    stores: [
      { name: "La Croisette",            phone: "269 6085", area: "Grand Baie" },
      { name: "Port Louis · Caudan",     phone: "210 2358", area: "Capital" },
      { name: "Port Louis · Royal Road", area: "Capital" },
      { name: "Bagatelle Mall",          phone: "468 8663", area: "Moka" },
      { name: "La City Trianon",         phone: "466 6395", area: "Trianon" },
      { name: "Cascavelle Mall",         phone: "452 9911", area: "Flic en Flac" },
      { name: "Riche Terre Mall",        phone: "248 7087", area: "Riche Terre" },
      { name: "Super U Grand Baie",      phone: "269 1546", area: "Grand Baie" },
      { name: "Tribeca Mall",            phone: "471 3122", area: "Trianon" },
      { name: "Victoria Mall",           phone: "214 9715", area: "Quatre Bornes" },
      { name: "Rose Belle",              phone: "628 7404", area: "South" },
      { name: "Plaisance Shopping Village", area: "Plaisance" },
    ],
  },
  funky: {
    long: "Trendy accessories & gifts for the next generation.",
    blurb: "Funky Fish Mauritius is a popular, trendy accessory and gift brand offering a wide variety of colourful, 'funky' items, including jewellery, hair accessories, bags, sunglasses, school gear, and plush toys. Eight stores across Mauritius, all built around bright, playful retail.",
    franchise: "Tamak-operated · since 2008",
    promise: "Bright, playful, affordable — for tweens, teens, and gift-givers.",
    highlights: [
      "Fashion accessories for tweens & teens",
      "Eight stores in major Mauritian malls",
      "Jewellery, hair accessories, bags, sunglasses",
      "Plush toys, gift-wrapping, seasonal capsules",
    ],
    /* Real bestsellers — names, prices, and product imagery from funkyfish.mu */
    products: [
      { name: "LIVING NATURE Tiger Sitting",       desc: "Plush · 30 cm collectible",       price: "Rs 1,999", image: "assets/brands/ff-product-tiger.jpg" },
      { name: "MAGNOIDZ Microscope & Telescope",   desc: "Science kit · 2-in-1",            price: "Rs 699",   image: "assets/brands/ff-product-microscope.jpg" },
      { name: "NURCHUMS Dino Hatching Eggs",       desc: "Large · grows in water",          price: "Rs 399",   image: "assets/brands/ff-product-dinoeggs.jpg" },
      { name: "Rabbit Puppet Pal",                 desc: "Hand puppet · soft plush",        price: "Rs 699",   image: "assets/brands/ff-product-rabbit.jpg" },
    ],
    storeImage: "assets/brands/funkyfish-hero-5.jpg",
    /* 5 stores — confirmed by Tamak. funkyfish.mu has no published store list. */
    stores: [
      { name: "Bagatelle Mall",   area: "Moka" },
      { name: "La City Trianon",  area: "Trianon" },
      { name: "Victoria Mall",    area: "Quatre Bornes" },
      { name: "Riche Terre Mall", area: "Riche Terre" },
      { name: "Rose Hill",        area: "Rose Hill" },
    ],
  },
  bottega: {
    long: "Italian beauty & wellness, since 1972 in Pienza, Tuscany.",
    blurb: "Bottega Verde is a leading Italian beauty brand founded in 1972 in Pienza, Tuscany, specializing in natural cosmetics. Originally a small herbalist shop, it has grown into a major brand renowned for blending Italian botanical tradition with scientific research. Tamak brings it to Mauritius.",
    franchise: "Italian franchise · Tamak Mauritius since 2015",
    promise: "Botanical Italian skincare, fairly priced, ethically made.",
    highlights: [
      "Italian botanical tradition meets scientific research",
      "Naturally-derived ingredients from Tuscan herbal gardens",
      "Cruelty-free, dermatologically tested",
      "Made in Pienza, Italy · distributed in Mauritius by Tamak",
    ],
    products: [
      { name: "Olio di Argan",   desc: "Pure argan body oil",        price: "Rs 990",  image: "assets/brands/bottega-product-1.jpg" },
      { name: "Mosto d'Uva",     desc: "Anti-aging cream · 50ml",    price: "Rs 1,490", image: "assets/brands/bottega-product-2.jpg" },
      { name: "Cocco e Karité",  desc: "Hand cream duo",             price: "Rs 690",  image: "assets/brands/bottega-product-3.jpg" },
      { name: "Aloe Vera Bagno", desc: "Shower gel · 400ml",         price: "Rs 590",  image: "assets/brands/bottega-product-4.jpg" },
    ],
    storeImage: "assets/brands/bottega-hero.jpg",
    /* 4 stores from bottegaverdemu.com — the brand publishes mall names only,
       all enquiries route through the Tamak switchboard (+230 233 0020). */
    stores: [
      { name: "Bagatelle Mall",             area: "Moka",     phone: "233 0020" },
      { name: "Tribeca Mall",               area: "Trianon",  phone: "233 0020" },
      { name: "Mahogany Shopping Promenade",area: "Bagatelle",phone: "233 0020" },
      { name: "Arcades Currimjee",          area: "Curepipe", phone: "233 0020" },
    ],
  },
  livewell: {
    long: "Better health, better you. A modern Mauritian parapharmacy.",
    blurb: "Livewell Mauritius is a specialized health, wellness, and beauty retail brand offering a curated selection of products. It operates as a modern parapharmacy and lifestyle store, featuring health supplements, dermo-cosmetics, mother-and-baby care, sports nutrition, and organic products.",
    franchise: "Tamak-developed concept · since 2017",
    promise: "Clean, curated, expert-led wellness retail.",
    highlights: [
      "Modern parapharmacy concept · Bagatelle Mall",
      "Curated supplement edit, third-party tested",
      "Dermo-cosmetics, mother & baby, sports nutrition",
      "In-store consultations with pharmacists",
    ],
    products: [
      { name: "Vitamin D3 5000IU",   desc: "60 capsules",            price: "Rs 590", image: null },
      { name: "Magnesium glycinate", desc: "200mg · 90 capsules",    price: "Rs 690", image: null },
      { name: "Mineral SPF 50",      desc: "Reef-safe sunscreen",    price: "Rs 890", image: null },
      { name: "Probiotic complex",   desc: "30 billion CFU",         price: "Rs 990", image: null },
    ],
    storeImage: "assets/brands/livewell-2-hires.jpg",
    /* 1 store — confirmed by Tamak. */
    stores: [
      { name: "Bagatelle Mall",  area: "Moka" },
    ],
  },
};

const Brand = ({ go, brandKey }) => {
  const brand = BRANDS.find(b => b.key === brandKey);
  const content = BRAND_CONTENT[brandKey];
  if (!brand || !content) return <div style={{ padding: 80, textAlign: "center" }}>Brand not found.</div>;

  return (
    <main className="page-enter">
      {/* HERO */}
      <section style={{ background: brand.color, color: brand.ink, padding: "64px 0 80px", position: "relative", overflow: "hidden" }}>
        <div className="shell-wide">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 40, flexWrap: "wrap", gap: 12 }}>
            <a onClick={() => go("home")} style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.8, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 8 }}>
              ← A Tamak Group brand
            </a>
            <Tag style={{ background: "rgba(255,255,255,0.18)", color: brand.ink, border: "1px solid rgba(255,255,255,0.3)" }}>
              {brand.category} · {brand.stores} stores · Mauritius
            </Tag>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "end" }} className="bp-head">
            <div>
              <h1 className="display-hero" style={{ color: brand.ink, fontWeight: 500 }}>{brand.name}</h1>
              <div style={{ marginTop: 24, fontFamily: "var(--f-display)", fontSize: "clamp(22px, 2.4vw, 32px)", letterSpacing: "-0.02em", maxWidth: 620, lineHeight: 1.15, opacity: 0.95 }}>
                {content.long}
              </div>
            </div>
            <div style={{ maxWidth: 380 }}>
              <p style={{ fontSize: 16, lineHeight: 1.55, opacity: 0.9, marginBottom: 20 }}>{content.blurb}</p>
              <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.75, marginBottom: 28 }}>
                {content.franchise}
              </div>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                <a className="btn btn-lg" style={{ background: brand.ink, color: brand.color, cursor: "pointer" }}>
                  Visit a store <Icon.ArrowRight size={14} />
                </a>
                <a className="btn btn-lg" style={{ background: "transparent", color: brand.ink, border: `1px solid ${brand.ink === "#FFFFFF" ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.2)"}`, cursor: "pointer" }}>
                  Shop online
                </a>
              </div>
            </div>
          </div>

          {/* Hero photo */}
          <div style={{ marginTop: 56, borderRadius: 24, overflow: "hidden", border: "1px solid rgba(255,255,255,0.15)", height: 440, background: "rgba(0,0,0,0.1)" }}>
            {content.storeImage ? (
              <img src={content.storeImage} alt={`${brand.name} store`} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            ) : (
              <Placeholder label={`${brand.name} — brand campaign`} ratio="auto" style={{ height: "100%", background: "transparent", color: brand.ink === "#FFFFFF" ? "rgba(255,255,255,0.65)" : "rgba(0,0,0,0.45)" }} />
            )}
          </div>

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

      {/* The promise */}
      <section style={{ padding: "72px 0", background: "#F8FAFC", borderBottom: "1px solid var(--line)" }}>
        <div className="shell" style={{ maxWidth: 920, textAlign: "center" }}>
          <Eyebrow dot color={brand.color}>The promise</Eyebrow>
          <h2 className="display-lg" style={{ marginTop: 16 }}>
            <em className="serif" style={{ fontStyle: "italic", color: brand.color }}>{content.promise}</em>
          </h2>
        </div>
      </section>

      {/* Highlights + bestsellers */}
      <section className="section">
        <div className="shell-wide">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 56 }} className="bp-grid">
            {/* Highlights */}
            <div>
              <Eyebrow dot color={brand.color}>What makes it ours</Eyebrow>
              <h2 className="display-lg" style={{ marginTop: 16, marginBottom: 32 }}>
                The {brand.name} <em className="serif" style={{ fontStyle: "italic", color: brand.color }}>difference.</em>
              </h2>
              <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
                {content.highlights.map((h, i) => (
                  <div key={i} style={{ display: "flex", gap: 16, alignItems: "start", padding: "20px 0", borderTop: i === 0 ? "1px solid var(--line)" : "none", borderBottom: "1px solid var(--line)" }}>
                    <div style={{ width: 28, height: 28, borderRadius: 999, background: brand.color, color: brand.ink, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                      <Icon.Check size={14} />
                    </div>
                    <div style={{ fontSize: 16, lineHeight: 1.45, paddingTop: 4 }}>{h}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Bestsellers */}
            <div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 24 }}>
                <div>
                  <Eyebrow dot color={brand.color}>Customer favourites</Eyebrow>
                  <h2 className="display-lg" style={{ marginTop: 16 }}>Shop bestsellers.</h2>
                </div>
                <a className="ulink" style={{ fontSize: 14 }}>Browse all <Icon.ArrowRight size={12} /></a>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }} className="bp-best">
                {content.products.map((p, i) => (
                  <div key={i} style={{ background: "#FFF", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden" }}>
                    <div style={{ background: `${brand.color}1A`, aspectRatio: "1/1", position: "relative", overflow: "hidden" }}>
                      {p.image ? (
                        <img src={p.image} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                      ) : (
                        <Placeholder label={p.name} ratio="auto" style={{ height: "100%", background: "transparent", color: brand.color, opacity: 0.7 }} />
                      )}
                    </div>
                    <div style={{ padding: 16 }}>
                      <div style={{ fontFamily: "var(--f-display)", fontSize: 17, letterSpacing: "-0.01em" }}>{p.name}</div>
                      <div style={{ fontSize: 12, color: "var(--mute)", marginTop: 2 }}>{p.desc}</div>
                      <div style={{ marginTop: 10, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                        <span style={{ fontFamily: "var(--f-mono)", fontSize: 13, color: brand.color, fontWeight: 500 }}>{p.price}</span>
                        <a className="ulink" style={{ fontSize: 12 }}>Add to bag</a>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

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

      {/* Real stores directory — if available */}
      {content.stores && <StoresDirectory brand={brand} stores={content.stores} />}

      {/* Per-brand contact strip — only for brands whose own site published these */}
      {BRAND_SOCIALS[brandKey] && <BrandContact brand={brand} info={BRAND_SOCIALS[brandKey]} />}

      {/* Visit us strip */}
      <section style={{ padding: "80px 0" }}>
        <div className="shell-wide">
          <div style={{ background: brand.color, color: brand.ink, borderRadius: 28, padding: 48, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 32, flexWrap: "wrap" }}>
            <div>
              <Eyebrow color={brand.ink === "#FFFFFF" ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.55)"}>Find {brand.name} in Mauritius</Eyebrow>
              <div className="display-lg" style={{ marginTop: 12, color: brand.ink }}>{brand.stores} {brand.stores === 1 ? "location" : "locations"}, all over the island.</div>
            </div>
            <a onClick={() => go("contact")} className="btn btn-lg" style={{ background: brand.ink, color: brand.color, cursor: "pointer" }}>
              Find a store <Icon.Pin size={14} />
            </a>
          </div>
        </div>
      </section>

      {/* Other brands strip */}
      <OtherBrands current={brandKey} go={go} />
    </main>
  );
};

const StoresDirectory = ({ brand, stores }) => (
  <section className="section" style={{ background: "#F8FAFC" }}>
    <div className="shell-wide">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 32, flexWrap: "wrap", gap: 16 }}>
        <div>
          <Eyebrow dot color={brand.color}>{stores.length} locations across Mauritius</Eyebrow>
          <h2 className="display-xl" style={{ marginTop: 16, maxWidth: 720 }}>
            Visit a {brand.name}<br />
            <span className="serif" style={{ fontStyle: "italic", color: brand.color }}>near you.</span>
          </h2>
        </div>
        <Btn kind="ink" icon={<Icon.Pin size={14} />}>Open the locator</Btn>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10 }} className="stores-grid">
        {stores.map((s, i) => {
          const isCallable = Boolean(s.phone);
          const Tag = isCallable ? "a" : "div";
          const tagProps = isCallable
            ? { href: `tel:+230${s.phone.replace(/\s/g, "")}` }
            : {};
          return (
            <Tag
              key={i}
              {...tagProps}
              style={{
                display: "grid",
                gridTemplateColumns: isCallable ? "44px 1fr auto auto" : "44px 1fr auto",
                alignItems: "center",
                gap: 16,
                padding: "20px 22px",
                background: "#FFF",
                border: "1px solid var(--line)",
                borderRadius: 16,
                transition: "all 0.2s ease",
                textDecoration: "none",
                color: "inherit",
                cursor: isCallable ? "pointer" : "default",
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.background = brand.color;
                e.currentTarget.style.color = brand.ink;
                e.currentTarget.style.borderColor = brand.color;
                e.currentTarget.style.transform = "translateY(-1px)";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.background = "#FFF";
                e.currentTarget.style.color = "inherit";
                e.currentTarget.style.borderColor = "var(--line)";
                e.currentTarget.style.transform = "translateY(0)";
              }}
            >
              <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.1em", opacity: 0.6 }}>
                {String(i + 1).padStart(2, "0")}
              </div>
              <div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 19, letterSpacing: "-0.015em", lineHeight: 1.1 }}>
                  {s.name}
                </div>
                <div style={{ fontSize: 12, opacity: 0.65, marginTop: 3 }}>{s.area}</div>
              </div>
              {isCallable && (
                <>
                  <div style={{ fontFamily: "var(--f-mono)", fontSize: 14, letterSpacing: "0.04em", fontWeight: 500 }}>
                    {s.phone}
                  </div>
                  <div style={{ width: 32, height: 32, borderRadius: 999, background: "rgba(0,0,0,0.05)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                    <Icon.Phone size={14} />
                  </div>
                </>
              )}
              {!isCallable && (
                <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.06em", opacity: 0.5, textTransform: "uppercase" }}>
                  Visit
                </div>
              )}
            </Tag>
          );
        })}
      </div>

      <style>{`
        @media (max-width: 760px) {
          .stores-grid { grid-template-columns: 1fr !important; }
          .stores-grid a, .stores-grid div[style*="grid-template-columns"] { grid-template-columns: 32px 1fr auto !important; }
          .stores-grid a > div:last-child[style*="border-radius: 999"] { display: none !important; }
        }
      `}</style>
    </div>
  </section>
);

const BrandContact = ({ brand, info }) => {
  const socialLinks = [
    info.instagram && { label: "Instagram", href: info.instagram, icon: <Icon.Instagram size={16} /> },
    info.facebook  && { label: "Facebook",  href: info.facebook,  icon: <Icon.Facebook size={16} /> },
    info.tiktok    && { label: "TikTok",    href: info.tiktok,    icon: <Icon.TikTok size={16} /> },
    info.whatsapp  && { label: "WhatsApp",  href: `https://wa.me/${info.whatsapp.replace(/[^\d]/g, "")}`, icon: <Icon.WhatsApp size={16} /> },
  ].filter(Boolean);

  return (
    <section className="section" style={{ paddingTop: 40, paddingBottom: 80 }}>
      <div className="shell-wide">
        <div style={{
          background: "#FFF",
          border: "1px solid var(--line)",
          borderRadius: 24,
          padding: 36,
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr",
          gap: 36,
          alignItems: "center",
        }} className="bc-grid">
          <div>
            <Eyebrow dot color={brand.color}>Direct line</Eyebrow>
            <h3 className="display-lg" style={{ marginTop: 12, marginBottom: 18 }}>
              Talk to <em className="serif" style={{ fontStyle: "italic", color: brand.color }}>{brand.name}</em> direct.
            </h3>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 24, fontSize: 15 }}>
              {info.phone && (
                <a href={`tel:+230${info.phone.replace(/[^\d]/g, "").replace(/^230/, "")}`} style={{ display: "inline-flex", alignItems: "center", gap: 10, color: "var(--ink)", textDecoration: "none" }}>
                  <Icon.Phone size={16} /> <span style={{ fontFamily: "var(--f-mono)" }}>{info.phone}</span>
                </a>
              )}
              {info.email && (
                <a href={`mailto:${info.email}`} style={{ display: "inline-flex", alignItems: "center", gap: 10, color: "var(--ink)", textDecoration: "none" }}>
                  <Icon.Mail size={16} /> <span>{info.email}</span>
                </a>
              )}
            </div>
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "flex-end" }} className="bc-socials">
            {socialLinks.map((s, i) => (
              <a
                key={i}
                href={s.href}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={s.label}
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 8,
                  padding: "10px 16px",
                  borderRadius: 999,
                  border: `1px solid ${brand.color}`,
                  color: brand.color,
                  textDecoration: "none",
                  fontFamily: "var(--f-mono)",
                  fontSize: 12,
                  letterSpacing: "0.04em",
                  textTransform: "uppercase",
                  transition: "all 0.2s ease",
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = brand.color;
                  e.currentTarget.style.color = brand.ink;
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = "transparent";
                  e.currentTarget.style.color = brand.color;
                }}
              >
                {s.icon} {s.label}
              </a>
            ))}
          </div>
        </div>
        <style>{`@media (max-width: 760px) {
          .bc-grid { grid-template-columns: 1fr !important; }
          .bc-socials { justify-content: flex-start !important; }
        }`}</style>
      </div>
    </section>
  );
};

const OtherBrands = ({ current, go }) => {
  const others = BRANDS.filter(b => b.key !== current);
  return (
    <section className="section" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="shell-wide">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 32, flexWrap: "wrap", gap: 16 }}>
          <div>
            <Eyebrow dot color="#CC1B2B">More from the group</Eyebrow>
            <h2 className="display-xl" style={{ marginTop: 16 }}>Other Tamak brands.</h2>
          </div>
          <a onClick={() => go("home")} className="ulink" style={{ fontSize: 14, cursor: "pointer" }}>All brands <Icon.ArrowRight size={12} /></a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${Math.min(others.length, 5)}, 1fr)`, gap: 12 }} className="ob-grid">
          {others.map(b => (
            <button key={b.key} onClick={() => go(b.key === "yadea" ? "yadea" : `brand-${b.key}`)} style={{
              background: "#FFF", color: "var(--ink)", border: "1px solid var(--line)", padding: 20, borderRadius: 16, minHeight: 180,
              display: "flex", flexDirection: "column", justifyContent: "space-between", textAlign: "left", cursor: "pointer", overflow: "hidden", position: "relative",
            }}>
              <div style={{ width: 6, height: 32, background: b.color, borderRadius: 999, marginBottom: 12 }} />
              <div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 22, letterSpacing: "-0.02em" }}>{b.name}</div>
                <div style={{ fontSize: 11, fontFamily: "var(--f-mono)", color: "var(--mute)", marginTop: 4, letterSpacing: "0.06em", textTransform: "uppercase" }}>{b.category}</div>
              </div>
            </button>
          ))}
        </div>
        <style>{`
          @media (max-width: 900px) { .ob-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        `}</style>
      </div>
    </section>
  );
};

window.Brand = Brand;
