/* TAMAK GROUP — Home page (real content + photography) */

const Home = ({ go, tweaks }) => {
  return (
    <main className="page-enter">
      <HeroTamak go={go} />
      <StatsBand />
      <ThreePathways go={go} />
      <FeaturedBrands go={go} />
      <FeaturedProjects go={go} />
      <Manifesto go={go} />
      <CommunityEvolution go={go} />
      <CTABand go={go} />
    </main>
  );
};

/* --------- HERO --------- */
const HeroTamak = ({ go }) => (
  <section style={{ position: "relative", paddingTop: 0, paddingBottom: 0, overflow: "hidden" }}>
    {/* Full-bleed hero with the real Tamak HQ sunset photo */}
    <div style={{ position: "relative", minHeight: 680, display: "flex", alignItems: "center" }}>
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        backgroundImage: `linear-gradient(180deg, rgba(15,23,42,0.25) 0%, rgba(15,23,42,0.55) 60%, rgba(15,23,42,0.78) 100%), url(assets/tamak-hero.png)`,
        backgroundSize: "cover", backgroundPosition: "center 40%",
      }} />
      <div className="shell-wide" style={{ position: "relative", padding: "80px 32px 64px" }}>
        <Eyebrow dot color="#CC1B2B">A house of brands · Founded 1983 · Coromandel, Mauritius</Eyebrow>
        <h1 className="display-hero" style={{ color: "#FFF", marginTop: 28, maxWidth: 1100, letterSpacing: "-0.045em" }}>
          Honouring your<br />
          <span className="serif" style={{ fontStyle: "italic", color: "#FFB4BB" }}>trust</span> since 1983.
        </h1>
        <p style={{ marginTop: 28, fontSize: 19, color: "rgba(255,255,255,0.85)", maxWidth: 640, lineHeight: 1.5 }}>
          A Mauritian family business across fashion, perfumes, electric mobility, B2B services, and property — built on accessible quality, reliable service, and long-term partnerships.
        </p>
        <div style={{ marginTop: 36, display: "flex", gap: 12, flexWrap: "wrap" }}>
          <Btn kind="orange" size="lg" onClick={() => go("brands")}>Explore our brands</Btn>
          <a onClick={() => go("b2b")} className="btn btn-lg" style={{ background: "rgba(255,255,255,0.1)", color: "#FFF", border: "1px solid rgba(255,255,255,0.35)", backdropFilter: "blur(8px)", cursor: "pointer" }}>
            Discover B2B solutions <Icon.ArrowRight size={14} />
          </a>
        </div>

        {/* Bottom strip on hero */}
        <div style={{ marginTop: 88, display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.18)", color: "rgba(255,255,255,0.7)", fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", flexWrap: "wrap", gap: 16 }} className="hero-strip">
          <span>Three divisions · Retail · B2B · Property</span>
          <span style={{ color: "#FFB4BB" }}>● Building tomorrow, together</span>
          <span>tamak@tamak.com · +230 2330020</span>
        </div>
      </div>
    </div>
  </section>
);

/* --------- STATS --------- */
const StatsBand = () => {
  const stats = [
    { n: TAMAK_TOTAL_STORES, label: "shops across Mauritius", suffix: "" },
    { n: 175,  label: "employees",              suffix: "" },
    { n: 1983, label: "founded",                suffix: "" },
    { n: 40,   label: "years honouring trust",  suffix: "+" },
  ];
  return (
    <section style={{ padding: "88px 0", background: "#F8FAFC", borderBottom: "1px solid var(--line)" }}>
      <div className="shell-wide">
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <Eyebrow dot color="#CC1B2B">By the numbers</Eyebrow>
          <h2 className="display-xl" style={{ marginTop: 16, maxWidth: 880, marginLeft: "auto", marginRight: "auto" }}>
            Rooted in heritage,<br />
            <span className="serif" style={{ fontStyle: "italic", color: "#CC1B2B" }}>focused on tomorrow.</span>
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }} className="stats-grid">
          {stats.map((s, i) => (
            <Reveal key={i} delay={i * 80}>
              <div style={{ background: "#FFF", borderRadius: 24, padding: 32, border: "1px solid var(--line)", textAlign: "center", boxShadow: "0 1px 3px rgba(0,0,0,0.04)" }}>
                <div style={{ fontFamily: "var(--f-display)", fontSize: "clamp(48px, 6vw, 88px)", fontWeight: 500, letterSpacing: "-0.04em", lineHeight: 0.9, color: "#CC1B2B" }}>
                  <CountUp to={s.n} suffix={s.suffix} duration={1600} />
                </div>
                <div style={{ marginTop: 12, fontSize: 14, color: "var(--mute)" }}>
                  {s.label}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
        <style>{`
          @media (max-width: 900px) { .stats-grid { grid-template-columns: 1fr 1fr !important; } }
        `}</style>
      </div>
    </section>
  );
};

/* --------- THREE PATHWAYS --------- */
const ThreePathways = ({ go }) => {
  const pathways = [
    {
      no: "01",
      title: "Retail",
      icon: <Icon.Spark />,
      blurb: "Trendy accessories, premium lifestyle wear, and accessible perfumes — brands loved by Mauritians and visitors alike.",
      list: ["Funky Fish — trendy accessories & gifts", "Citadel — Feel Great Anywhere", "Adopt — affordable French perfumes", "Bottega Verde, Livewell"],
      cta: "Explore Retail",
      target: "brands",
    },
    {
      no: "02",
      title: "B2B Solutions",
      icon: <Icon.Bolt />,
      blurb: "Behind hundreds of Mauritian businesses — POS, logistics, ecological products, and electric fleets.",
      list: ["Posterita POS systems", "Distribution & logistics", "Ecological products", "Yadea electric fleets — delivery, corporate, government"],
      cta: "Explore B2B",
      target: "b2b",
    },
    {
      no: "03",
      title: "Tech & Innovation",
      icon: <Icon.Globe />,
      blurb: "Future-focused projects: electric mobility, AI-driven solutions, and the upcoming Coromandel Village development.",
      list: ["Yadea Mauritius — exclusive distributor", "AI and R&D — smart, efficient solutions", "Coromandel Village (Coming Soon)"],
      cta: "Explore Innovation",
      target: "yadea",
    },
  ];

  return (
    <section className="section">
      <div className="shell-wide">
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <Eyebrow dot color="#CC1B2B">What we do</Eyebrow>
          <h2 className="display-xl" style={{ marginTop: 16 }}>Three Pathways.</h2>
          <div style={{ width: 80, height: 3, background: "#CC1B2B", borderRadius: 999, margin: "20px auto 0" }} />
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="path-grid">
          {pathways.map(p => (
            <div key={p.no} style={{ background: "#FFF", borderRadius: 24, padding: 36, border: "1px solid var(--line)", display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 440, transition: "all 0.3s ease" }}>
              <div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
                  <div style={{ width: 56, height: 56, borderRadius: 16, background: "#CC1B2B", color: "white", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                    {p.icon}
                  </div>
                  <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.12em", color: "var(--mute)" }}>{p.no}</div>
                </div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 36, letterSpacing: "-0.025em", marginBottom: 12, fontWeight: 500 }}>{p.title}</div>
                <p style={{ fontSize: 15, color: "var(--mute)", lineHeight: 1.5, marginBottom: 20 }}>{p.blurb}</p>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                  {p.list.map((item, i) => (
                    <li key={i} style={{ display: "flex", gap: 10, fontSize: 14, color: "#1E293B" }}>
                      <span style={{ width: 6, height: 6, borderRadius: 999, background: "#CC1B2B", flexShrink: 0, marginTop: 8 }} />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <button onClick={() => go(p.target)} className="btn btn-ink btn-lg" style={{ width: "100%", justifyContent: "center", marginTop: 28 }}>
                {p.cta} <Icon.ArrowRight size={14} />
              </button>
            </div>
          ))}
        </div>

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

/* --------- FEATURED BRANDS --------- */
const FeaturedBrands = ({ go }) => {
  return (
    <section className="section" style={{ background: "#F8FAFC" }} id="brands">
      <div className="shell-wide">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 40, flexWrap: "wrap", gap: 24 }}>
          <div>
            <Eyebrow dot color="#CC1B2B">Our retail portfolio</Eyebrow>
            <h2 className="display-xl" style={{ marginTop: 16, maxWidth: 720 }}>
              Brands loved by <em className="serif" style={{ fontStyle: "italic", color: "#CC1B2B" }}>generations.</em>
            </h2>
          </div>
          <p style={{ maxWidth: 380, fontSize: 15, color: "var(--mute)" }}>
            Six retail brands across Mauritius — from Bordeaux perfumes to Mauritian lifestyle wear, all delivered with the same standard of service.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="brand-grid">
          {BRANDS.map((b) => (
            <BrandCard key={b.key} brand={b} onClick={() => go(b.key === "yadea" ? "yadea" : `brand-${b.key}`)} />
          ))}
        </div>

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

const BrandCard = ({ brand, onClick }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        textAlign: "left",
        background: "#FFF",
        border: "1px solid var(--line)",
        borderRadius: 24,
        padding: 0,
        cursor: "pointer",
        overflow: "hidden",
        position: "relative",
        minHeight: 460,
        display: "flex",
        flexDirection: "column",
        transition: "all 0.4s cubic-bezier(0.22,1,0.36,1)",
        transform: hover ? "translateY(-4px)" : "translateY(0)",
        boxShadow: hover ? "0 24px 48px -16px rgba(15,23,42,0.18)" : "0 1px 3px rgba(0,0,0,0.04)",
      }}
    >
      {/* Photo area */}
      <div style={{ position: "relative", height: 260, overflow: "hidden", background: brand.imageBg || brand.color }}>
        <img
          src={brand.image}
          alt={`${brand.name} key visual`}
          style={{
            width: "100%",
            height: "100%",
            objectFit: brand.imageFit || "cover",
            padding: brand.imageFit === "contain" ? 28 : 0,
            transform: hover ? "scale(1.06)" : "scale(1)",
            transition: "transform 0.6s cubic-bezier(0.22,1,0.36,1)",
          }}
        />
        <div style={{ position: "absolute", top: 14, left: 14 }}>
          <Tag style={{ background: "rgba(255,255,255,0.92)", color: "#1E293B", border: "none", backdropFilter: "blur(4px)" }}>
            {brand.category}
          </Tag>
        </div>
        <div style={{ position: "absolute", top: 14, right: 14, width: 36, height: 36, borderRadius: 999, background: "#CC1B2B", color: "#FFF", display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease", transform: hover ? "rotate(-45deg)" : "rotate(0deg)" }}>
          <Icon.ArrowUpRight size={14} />
        </div>
      </div>

      <div style={{ padding: 28, flex: 1, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <div>
          <div style={{ fontFamily: "var(--f-display)", fontSize: 38, fontWeight: 500, letterSpacing: "-0.025em", lineHeight: 1 }}>
            {brand.name}
          </div>
          <div style={{ marginTop: 8, fontSize: 14, color: "#CC1B2B", fontWeight: 500 }}>
            {brand.tagline}
          </div>
        </div>
        <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--mute)", fontFamily: "var(--f-mono)", letterSpacing: "0.04em", textTransform: "uppercase" }}>
          <span>Since {brand.since}</span>
          <span>{brand.stores} stores</span>
        </div>
      </div>
    </button>
  );
};

/* --------- FEATURED PROJECTS --------- */
const FeaturedProjects = ({ go }) => {
  const projects = [
    { title: "Yadea Mauritius", blurb: "Leading the electric mobility revolution.", image: "assets/yadea/hero-mint.png", tag: "Electric mobility", action: () => go("yadea") },
    { title: "Coromandel Village", blurb: "A new destination for lifestyle and convenience. (Coming Soon)", image: "assets/best-island.png", tag: "Property · 2026", action: null },
    { title: "Yes Mauritius", blurb: "Our digital platform celebrating Mauritius.", image: "assets/together-tomorrow.png", tag: "Digital · Community", action: null },
  ];
  return (
    <section className="section">
      <div className="shell-wide">
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <Eyebrow dot color="#CC1B2B">Featured projects</Eyebrow>
          <h2 className="display-xl" style={{ marginTop: 16 }}>What we're building.</h2>
          <div style={{ width: 80, height: 3, background: "#CC1B2B", borderRadius: 999, margin: "20px auto 0" }} />
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="proj-grid">
          {projects.map((p, i) => (
            <article key={i} style={{ background: "#FFF", border: "1px solid var(--line)", borderRadius: 20, overflow: "hidden", display: "flex", flexDirection: "column", minHeight: 420 }}>
              <div style={{ height: 220, overflow: "hidden", background: "#F8FAFC", position: "relative" }}>
                <img src={p.image} alt={p.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                <div style={{ position: "absolute", top: 14, left: 14 }}>
                  <Tag style={{ background: "rgba(255,255,255,0.95)", color: "#1E293B", border: "none" }}>{p.tag}</Tag>
                </div>
              </div>
              <div style={{ padding: 28, flex: 1, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                <div>
                  <div style={{ fontFamily: "var(--f-display)", fontSize: 26, letterSpacing: "-0.02em", marginBottom: 10 }}>{p.title}</div>
                  <p style={{ fontSize: 14, color: "var(--mute)", lineHeight: 1.5 }}>{p.blurb}</p>
                </div>
                {p.action && (
                  <button onClick={p.action} className="btn btn-ghost btn-sm" style={{ marginTop: 20, alignSelf: "flex-start" }}>
                    Learn more <Icon.ArrowRight size={12} />
                  </button>
                )}
              </div>
            </article>
          ))}
        </div>

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

/* --------- MANIFESTO --------- */
const Manifesto = ({ go }) => (
  <section className="section" style={{ background: "#0F172A", color: "#FFF" }}>
    <div className="shell" style={{ maxWidth: 1080 }}>
      <Eyebrow dot color="#CC1B2B">A note from the family</Eyebrow>
      <p style={{ marginTop: 32, fontFamily: "var(--f-display)", fontSize: "clamp(28px, 3.4vw, 52px)", lineHeight: 1.18, letterSpacing: "-0.02em", fontWeight: 400, textWrap: "balance", color: "#FFF" }}>
        Founded in <em className="serif">1983</em>, Tamak began in textiles before expanding into retail, B2B, and technology. <span style={{ color: "rgba(255,255,255,0.55)" }}>By making bold choices — stepping away from outdated activities and investing in ecological products, electric mobility, and innovation — we honour our heritage while preparing for tomorrow.</span>
      </p>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 48, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.15)", flexWrap: "wrap", gap: 16 }}>
        <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
          <div style={{ width: 52, height: 52, borderRadius: 999, background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.15)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--f-display)", fontSize: 18, color: "#FFB4BB" }}>
            ET
          </div>
          <div>
            <div style={{ fontSize: 15, fontWeight: 600, color: "#FFF" }}>Emmanuel Tsang Mang Kin</div>
            <div style={{ fontSize: 13, color: "rgba(255,255,255,0.55)" }}>Founder · launched Citadel from his garage in '83</div>
          </div>
        </div>
        <a onClick={() => go("logo")} className="ulink" style={{ fontSize: 14, color: "#FFB4BB", cursor: "pointer" }}>Read our story <Icon.ArrowRight size={12} /></a>
      </div>
    </div>
  </section>
);

/* --------- COMMUNITY & EVOLUTION --------- */
const CommunityEvolution = ({ go }) => {
  const pillars = [
    { ic: <Icon.Shield />, title: "Trusted Quality", body: "Global brands and local businesses trust our solutions." },
    { ic: <Icon.Spark />,  title: "Generations",     body: "Serving Mauritians for over four decades." },
    { ic: <Icon.Globe />,  title: "Future Focus",    body: "Building tomorrow through innovation." },
  ];
  return (
    <section className="section">
      <div className="shell-wide">
        <div style={{ textAlign: "center", maxWidth: 880, margin: "0 auto" }}>
          <Eyebrow dot color="#CC1B2B">Community & evolution</Eyebrow>
          <h2 className="display-xl" style={{ marginTop: 16 }}>
            One of <em className="serif" style={{ fontStyle: "italic", color: "#CC1B2B" }}>transformation.</em>
          </h2>
          <p style={{ marginTop: 24, fontSize: 18, color: "var(--mute)", lineHeight: 1.55 }}>
            Tamak's journey is one of transformation. Exiting legacy sectors such as textiles and F&B was a deliberate choice — to focus on tomorrow through retail, B2B, ecological products, and electric mobility.
          </p>
        </div>

        <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="pillars-grid">
          {pillars.map((p, i) => (
            <div key={i} style={{ textAlign: "center", padding: "0 16px" }}>
              <div style={{ width: 60, height: 60, borderRadius: 999, background: "#FEE2E2", color: "#CC1B2B", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 20 }}>
                {p.ic}
              </div>
              <h3 style={{ fontFamily: "var(--f-display)", fontSize: 22, fontWeight: 500, marginBottom: 10 }}>{p.title}</h3>
              <p style={{ fontSize: 15, color: "var(--mute)", lineHeight: 1.5 }}>{p.body}</p>
            </div>
          ))}
        </div>

        <div style={{ textAlign: "center", marginTop: 48 }}>
          <Btn kind="ink" size="lg" onClick={() => go("logo")}>Learn our story</Btn>
        </div>

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

/* --------- CTA BAND --------- */
const CTABand = ({ go }) => (
  <section className="section">
    <div className="shell-wide">
      <div style={{ background: "#CC1B2B", color: "#FFF", borderRadius: 32, padding: 64, textAlign: "center" }}>
        <Eyebrow color="rgba(255,255,255,0.7)">Get in touch</Eyebrow>
        <h2 className="display-xl" style={{ marginTop: 16, color: "#FFF", maxWidth: 800, marginLeft: "auto", marginRight: "auto" }}>
          Building tomorrow,<br />
          <span className="serif" style={{ fontStyle: "italic" }}>together.</span>
        </h2>
        <div style={{ marginTop: 36, display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
          <a onClick={() => go("contact")} className="btn btn-paper btn-lg" style={{ cursor: "pointer" }}>
            Contact us <Icon.ArrowRight size={14} />
          </a>
          <a onClick={() => go("careers")} className="btn btn-lg" style={{ background: "transparent", color: "#FFF", border: "1px solid rgba(255,255,255,0.4)", cursor: "pointer" }}>
            Careers
          </a>
        </div>
      </div>
    </div>
  </section>
);

window.Home = Home;