/* Page sections */
const SUPABASE_URL = "https://kecvpvsisbfwyxwjekat.supabase.co";
const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImtlY3ZwdnNpc2Jmd3l4d2pla2F0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTU1NDE1NTksImV4cCI6MjA3MTExNzU1OX0.gP_N4lDA1wGSCCucZDb50lVX4kV6wzuUeJA3pZHokkw";
const { useState: useStateS, useEffect: useEffectS } = React;

/* ================== HEADER ================== */
function Header({ lang, setLang, t }) {
  const [scrolled, setScrolled] = useStateS(false);
  const [open, setOpen] = useStateS(false);
  const { isTablet } = useResponsive();

  useEffectS(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { href: "#capabilities", label: t.nav.services },
    { href: "#catalog", label: t.nav.capabilities },
    { href: "#about", label: t.nav.about },
    { href: "#contact", label: t.nav.contact },
  ];

  return (
    <>
      <header style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
        padding: scrolled ? "12px 28px" : "22px 28px",
        transition: "all .4s cubic-bezier(.2,.6,.2,1)",
        background: scrolled ? "rgba(245,242,236,0.78)" : "transparent",
        backdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
        WebkitBackdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
        borderBottom: scrolled ? "1px solid rgba(216,210,197,0.6)" : "1px solid transparent",
      }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", maxWidth: 1440, margin: "0 auto", gap: 24 }}>
          <Logo size={20} />
          {!isTablet && (
            <nav style={{ display: "flex", alignItems: "center", gap: 28 }}>
              {links.map(l => <HeaderLink key={l.href} {...l} />)}
            </nav>
          )}
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            {!isTablet && <LangToggle lang={lang} setLang={setLang} />}
            {!isTablet && <Cta href="#contact" primary small>{t.nav.quote}</Cta>}
            {isTablet && (
              <button onClick={() => setOpen(true)} aria-label="Open menu"
                style={{ display: "flex", flexDirection: "column", gap: 5, padding: "6px 4px" }}>
                <span style={{ display: "block", width: 22, height: 1.5, background: "var(--ink)" }} />
                <span style={{ display: "block", width: 22, height: 1.5, background: "var(--ink)" }} />
                <span style={{ display: "block", width: 22, height: 1.5, background: "var(--ink)" }} />
              </button>
            )}
          </div>
        </div>
      </header>
      {open && <MobileMenu t={t} lang={lang} setLang={setLang} onClose={() => setOpen(false)} />}
    </>
  );
}

function HeaderLink({ href, label }) {
  const [h, setH] = useStateS(false);
  return (
    <a href={href} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
       style={{ fontSize: 13.5, color: h ? "var(--ink)" : "var(--ink-2)", letterSpacing: "-0.005em", position: "relative", transition: "color .25s" }}>
      {label}
      <span style={{
        position: "absolute", left: 0, right: 0, bottom: -4, height: 1,
        background: "var(--ink)", transformOrigin: "left",
        transform: h ? "scaleX(1)" : "scaleX(0)", transition: "transform .35s cubic-bezier(.2,.6,.2,1)",
      }} />
    </a>
  );
}

function LangToggle({ lang, setLang }) {
  return (
    <div className="mono" style={{
      display: "inline-flex", border: "1px solid var(--line)", borderRadius: 999, padding: 3,
      background: "rgba(255,255,255,0.4)",
    }}>
      {["en", "pt"].map(code => (
        <button key={code} onClick={() => setLang(code)}
          style={{
            padding: "5px 11px", borderRadius: 999, fontSize: 10.5, letterSpacing: "0.08em",
            background: lang === code ? "var(--ink)" : "transparent",
            color: lang === code ? "var(--bg)" : "var(--muted)",
            transition: "all .25s",
          }}>{code.toUpperCase()}</button>
      ))}
    </div>
  );
}

function MobileMenu({ t, lang, setLang, onClose }) {
  const links = [
    { href: "#capabilities", label: t.nav.services },
    { href: "#catalog", label: t.nav.capabilities },
    { href: "#about", label: t.nav.about },
    { href: "#contact", label: t.nav.contact },
  ];
  useEffectS(() => {
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = ""; };
  }, []);
  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 200,
      background: "var(--ink)",
      display: "flex", flexDirection: "column",
      padding: "22px 28px 40px",
      animation: "slideIn .32s cubic-bezier(.2,.6,.2,1)",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <Logo color="var(--bg)" />
        <button onClick={onClose} aria-label="Close menu"
          style={{ color: "var(--bg)", fontSize: 28, lineHeight: 1, padding: "4px 8px" }}>×</button>
      </div>
      <nav style={{ marginTop: 56, display: "flex", flexDirection: "column", gap: 28 }}>
        {links.map(l => (
          <a key={l.href} href={l.href} onClick={onClose}
            className="serif" style={{
              fontSize: "clamp(36px, 12vw, 52px)",
              color: "rgba(245,242,236,0.9)",
              letterSpacing: "-0.025em",
              lineHeight: 1,
              display: "block",
            }}>{l.label}</a>
        ))}
      </nav>
      <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 20 }}>
        <Cta href="#contact" primary onClick={onClose}>{t.nav.quote}</Cta>
        <LangToggle lang={lang} setLang={setLang} />
      </div>
    </div>
  );
}

/* ================== HERO ================== */
const HERO_IMAGES = [
  "https://images.unsplash.com/photo-1621905252472-943afaa20e20?auto=format&fit=crop&w=1400&q=80",
  "https://images.unsplash.com/photo-1562568068-7a90cf9e499d?auto=format&fit=crop&w=1400&q=80",
  "https://images.unsplash.com/photo-1776159904891-e7b213b8198f?auto=format&fit=crop&w=1400&q=80",
  "https://images.unsplash.com/photo-1735494032948-14ef288fc9d3?auto=format&fit=crop&w=1400&q=80",
];

function Hero({ t, headlineIdx }) {
  const { isTablet } = useResponsive();
  const headline = t.hero.headlines[headlineIdx % t.hero.headlines.length];
  const [heroIdx, setHeroIdx] = useStateS(0);

  useEffectS(() => {
    if (HERO_IMAGES.length <= 1) return;
    const id = setInterval(() => setHeroIdx(i => (i + 1) % HERO_IMAGES.length), 5000);
    return () => clearInterval(id);
  }, []);

  return (
    <section data-screen-label="01 Hero" style={{
      position: "relative",
      padding: isTablet ? "120px 20px 60px" : "150px 28px 80px",
      maxWidth: 1440, margin: "0 auto",
    }}>
      <Reveal delay={50}>
        <Eyebrow>{t.hero.eyebrow}</Eyebrow>
      </Reveal>

      <div style={{
        marginTop: 32,
        display: "grid",
        gridTemplateColumns: isTablet ? "1fr" : "1fr 1fr",
        gap: isTablet ? 32 : 60,
        alignItems: "stretch",
      }}>
        {/* Left: headline + sub + CTAs */}
        <div style={{ display: "flex", flexDirection: "column" }}>
          <Reveal delay={120}>
            <Display parts={headline} italicIndex={1} />
          </Reveal>
          <Reveal delay={260}>
            <div style={{ marginTop: 32, paddingBottom: 8 }}>
              <p style={{ fontSize: 16, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 380 }}>
                {t.hero.sub}
              </p>
              <div style={{ display: "flex", gap: 10, marginTop: 24, flexWrap: "wrap" }}>
                <Cta href="#contact" primary>{t.hero.cta1}</Cta>
                <Cta href="#capabilities">{t.hero.cta2}</Cta>
              </div>
            </div>
          </Reveal>
        </div>

        {/* Right: crossfading image stack fills full column height */}
        <Reveal delay={380} style={{ height: "100%", minHeight: isTablet ? 220 : 460 }}>
          <div style={{ position: "relative", height: "100%", borderRadius: 10, overflow: "hidden", ...(isTablet ? { aspectRatio: "21 / 9" } : {}) }}>
            {HERO_IMAGES.map((src, i) => (
              <img
                key={src}
                src={src}
                alt="Industrial professionals using TRANS-LOG hardware"
                style={{
                  position: "absolute", inset: 0,
                  width: "100%", height: "100%",
                  objectFit: "cover", display: "block",
                  opacity: i === heroIdx ? 1 : 0,
                  transition: "opacity 1.2s ease",
                }}
              />
            ))}
          </div>
        </Reveal>
      </div>

      <Reveal delay={500}>
        <div style={{ marginTop: 32, display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {t.hero.tags.map(tag => (
              <span key={tag} className="mono" style={{
                padding: "7px 12px", border: "1px solid var(--line)", borderRadius: 999,
                fontSize: 10.5, color: "var(--ink-2)", background: "rgba(255,255,255,0.4)",
              }}>{tag}</span>
            ))}
          </div>
          {!isTablet && (
            <div className="mono" style={{ color: "var(--muted)", display: "flex", alignItems: "center", gap: 8 }}>
              <span>↓</span><span>scroll</span>
            </div>
          )}
        </div>
      </Reveal>
    </section>
  );
}

/* ================== PARTNERS ================== */
const BRAND_URLS = {
  "Dell": "https://www.dell.com",
  "HP": "https://www.hp.com",
  "Lenovo": "https://www.lenovo.com",
  "Intel": "https://www.intel.com",
  "NVIDIA": "https://www.nvidia.com",
  "Microsoft": "https://www.microsoft.com",
  "Cisco": "https://www.cisco.com",
  "APC": "https://www.apc.com",
  "Logitech": "https://www.logitech.com",
  "Schneider": "https://www.se.com",
};

function Partners({ t }) {
  const brands = ["Dell", "HP", "Lenovo", "Intel", "NVIDIA", "Microsoft", "Cisco", "APC", "Logitech", "Schneider"];
  const row = [...brands, ...brands];
  return (
    <section style={{ padding: "60px 0 30px", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "0 28px 24px" }}>
        <Eyebrow>{t.partners.label}</Eyebrow>
      </div>
      <div style={{ overflow: "hidden", maskImage: "linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)" }}>
        <div style={{ display: "flex", gap: 64, animation: "drift 38s linear infinite", width: "max-content", padding: "8px 32px" }}>
          {row.map((b, i) => (
            <a key={i} href={BRAND_URLS[b]} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
              <PartnerMark name={b} />
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================== CAPABILITIES ================== */
function Capabilities({ t }) {
  const { isTablet } = useResponsive();
  return (
    <section id="capabilities" data-screen-label="02 Capabilities" style={{ padding: isTablet ? "80px 20px 60px" : "140px 28px 80px", maxWidth: 1440, margin: "0 auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: isTablet ? "1fr" : "minmax(0, 1fr) minmax(0, 1.4fr)", gap: isTablet ? 16 : 60, alignItems: "end" }}>
        <Reveal><Eyebrow>{t.capabilities.eyebrow}</Eyebrow></Reveal>
        <Reveal delay={120}><SectionTitle parts={t.capabilities.title} italicIndex={1} /></Reveal>
      </div>

      <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: isTablet ? "1fr" : "repeat(3, minmax(0, 1fr))", gap: 24 }}>
        {t.capabilities.cards.map((c, i) => <CapCard key={c.id} card={c} delay={i * 100} />)}
      </div>
    </section>
  );
}

const CAP_IMAGES = {
  "01": "https://i.dell.com/is/image/DellContent/content/dam/ss2/product-images/dell-client-products/workstations/fixed-workstations/precision/3660/media-gallery/workstations-precision-3660-gallery-3.psd?fmt=png-alpha&pscan=auto&scl=1&hei=900&wid=675&qlt=100,1&resMode=sharp2&size=675,900&chrss=full",
  "02": "https://www.nordalp.com/assets/s-600/75083015-afe0-4db7-8357-520f8688dc72/Nordalp-Algiz-10XR-windows-tablet-public-transport.png",
  "03": "https://avansa.co.za/cdn/shop/files/avansa-supersort-2900-revolutionised-mixed-currency-counting-5243104.jpg?v=1758780450&width=600",
};
const CAP_BLEND = { "01": true, "02": false, "03": true };

function CapCard({ card, delay }) {
  const [hover, setHover] = useStateS(false);
  return (
    <Reveal delay={delay}>
      <article
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{
          padding: 28, borderRadius: 10, height: "100%",
          background: hover ? "#fff" : "rgba(255,255,255,0.5)",
          border: "1px solid var(--line)",
          transition: "all .4s cubic-bezier(.2,.6,.2,1)",
          transform: hover ? "translateY(-4px)" : "none",
          boxShadow: hover ? "0 18px 40px -22px rgba(26,24,21,0.18)" : "none",
          display: "flex", flexDirection: "column", gap: 20,
        }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span className="mono" style={{ color: "var(--muted)" }}>{card.id} · {card.tag}</span>
          <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--accent)" }}>●</span>
        </div>

        <Placeholder label={card.tag} ratio="4 / 3" style={{ borderRadius: 6 }} src={CAP_IMAGES[card.id]} blend={CAP_BLEND[card.id]} />

        <div>
          <h3 className="serif" style={{ fontSize: 28, lineHeight: 1.05, letterSpacing: "-0.015em", marginBottom: 12 }}>
            {card.title}
          </h3>
          <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--ink-2)" }}>{card.body}</p>
        </div>

        <ul style={{ listStyle: "none", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px 16px", marginTop: "auto", paddingTop: 18, borderTop: "1px solid var(--line)" }}>
          {card.items.map(it => (
            <li key={it} style={{ fontSize: 12.5, color: "var(--ink-2)", display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: 4, height: 4, borderRadius: "50%", background: "var(--muted)" }} />
              {it}
            </li>
          ))}
        </ul>
      </article>
    </Reveal>
  );
}

/* ================== CATALOG ================== */
function Catalog({ t }) {
  return (
    <section id="catalog" data-screen-label="03 Catalog" style={{ padding: "140px 28px 80px", maxWidth: 1440, margin: "0 auto" }}>
      <div style={{ maxWidth: 720 }}>
        <Reveal><Eyebrow>{t.catalog.eyebrow}</Eyebrow></Reveal>
        <Reveal delay={120}>
          <div style={{ marginTop: 18 }}>
            <SectionTitle parts={t.catalog.title} italicIndex={1} />
          </div>
        </Reveal>
        <Reveal delay={220}>
          <p style={{ marginTop: 22, fontSize: 16, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 560 }}>{t.catalog.sub}</p>
        </Reveal>
      </div>

      <div style={{ marginTop: 70, display: "grid", gap: 1, background: "var(--line)", border: "1px solid var(--line)", borderRadius: 8, overflow: "hidden" }}>
        {t.catalog.groups.map((g, i) => <CatalogRow key={g.name} group={g} delay={i * 100} />)}
      </div>
    </section>
  );
}

function CatalogRow({ group, delay }) {
  const { isTablet } = useResponsive();
  return (
    <Reveal delay={delay}>
      <div style={{ background: "var(--bg)", padding: isTablet ? "24px 20px" : "32px 28px" }}>
        <div style={{ display: "grid", gridTemplateColumns: isTablet ? "1fr" : "180px 1fr", gap: isTablet ? 16 : 32, alignItems: "start" }}>
          <div>
            <div className="mono" style={{ color: "var(--muted)", marginBottom: 8 }}>Group</div>
            <h4 className="serif-i" style={{ fontSize: isTablet ? 28 : 38, lineHeight: 1, letterSpacing: "-0.02em" }}>{group.name}</h4>
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "10px 8px" }}>
            {group.items.map(item => (
              <span key={item} style={{
                padding: "6px 14px", borderRadius: 999, border: "1px solid var(--line)",
                fontSize: 13, color: "var(--ink-2)", background: "rgba(255,255,255,0.5)",
              }}>{item}</span>
            ))}
          </div>
        </div>
      </div>
    </Reveal>
  );
}

/* ================== PROCESS ================== */
function Process({ t }) {
  const { isMobile, isTablet } = useResponsive();
  const cols = isMobile ? "1fr" : isTablet ? "repeat(2, 1fr)" : "repeat(4, 1fr)";
  return (
    <section data-screen-label="04 Process" style={{ padding: isTablet ? "80px 20px 60px" : "140px 28px 80px", maxWidth: 1440, margin: "0 auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: isTablet ? "1fr" : "minmax(0, 1fr) minmax(0, 1.4fr)", gap: isTablet ? 16 : 60, alignItems: "end" }}>
        <Reveal><Eyebrow>{t.process.eyebrow}</Eyebrow></Reveal>
        <Reveal delay={120}><SectionTitle parts={t.process.title} italicIndex={1} /></Reveal>
      </div>

      <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: cols, gap: 0, borderTop: "1px solid var(--line)" }}>
        {t.process.steps.map((s, i) => (
          <Reveal key={s.n} delay={i * 90}>
            <div style={{
              padding: isTablet ? "24px 0" : "28px 22px 28px 0",
              borderRight: (!isTablet && i < t.process.steps.length - 1) ? "1px solid var(--line)" : "none",
              borderBottom: isTablet ? "1px solid var(--line)" : "none",
              paddingLeft: (i === 0 || isTablet) ? 0 : 22,
              minHeight: isTablet ? "auto" : 220,
            }}>
              <div className="mono" style={{ color: "var(--accent)" }}>{s.n}</div>
              <h4 className="serif" style={{ fontSize: isTablet ? 24 : 30, lineHeight: 1.05, letterSpacing: "-0.02em", marginTop: 18 }}>{s.t}</h4>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--ink-2)", marginTop: 12 }}>{s.b}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

/* ================== ABOUT ================== */
function About({ t }) {
  const { isTablet } = useResponsive();
  return (
    <section id="about" data-screen-label="05 About" style={{ padding: isTablet ? "80px 20px 60px" : "140px 28px 80px", maxWidth: 1440, margin: "0 auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: isTablet ? "1fr" : "minmax(0, 1.1fr) minmax(0, 1fr)", gap: isTablet ? 48 : 80, alignItems: "start" }}>
        <div>
          <Reveal><Eyebrow>{t.about.eyebrow}</Eyebrow></Reveal>
          <Reveal delay={120}>
            <div style={{ marginTop: 22 }}><SectionTitle parts={t.about.title} italicIndex={1} /></div>
          </Reveal>
          <Reveal delay={240}>
            <p style={{ marginTop: 30, fontSize: 16.5, lineHeight: 1.6, color: "var(--ink-2)", maxWidth: 540 }}>
              {t.about.body}
            </p>
          </Reveal>

          <div style={{ marginTop: 50, display: "grid", gap: 22 }}>
            {t.about.pillars.map((p, i) => (
              <Reveal key={p.t} delay={300 + i * 80}>
                <div style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 18, paddingBottom: 22, borderBottom: "1px solid var(--line)" }}>
                  <div className="mono" style={{ color: "var(--muted)" }}>0{i + 1}</div>
                  <div>
                    <h5 className="serif" style={{ fontSize: 20, letterSpacing: "-0.01em", marginBottom: 6 }}>{p.t}</h5>
                    <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--ink-2)" }}>{p.b}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>

        <Reveal delay={200}>
          <div style={{ position: isTablet ? "static" : "sticky", top: 100 }}>
            <Placeholder label="Lenovo ThinkStation · professional workspace" ratio={isTablet ? "16 / 9" : "4 / 5"} style={{ borderRadius: 8 }} src="https://p4-ofp.static.pub/ShareResource/na/landing-pages/workstations/heros/lenovo-workstations-lifestyle-mobile-v2.jpg" />
            <div style={{ marginTop: 14, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span className="mono" style={{ color: "var(--muted)" }}>Maputo · Moçambique</span>
              <span className="mono" style={{ color: "var(--muted)" }}>Est. for industry</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ================== CONTACT ================== */
function Contact({ t }) {
  const { isTablet } = useResponsive();
  const [submitted, setSubmitted] = useStateS(false);
  const [submitting, setSubmitting] = useStateS(false);
  const [submitError, setSubmitError] = useStateS(null);
  const [form, setForm] = useStateS({ name: "", company: "", email: "", phone: "", interest: t.contact.interests[0], message: "" });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    setSubmitError(null);
    try {
      const sb = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
      const { error } = await sb.functions.invoke('submit-ticket', {
        body: { ...form, tenant_id: 'a2f6087f-cf1c-4198-a9b2-0bc1c80943ba' },
      });
      if (error) throw error;
      setSubmitted(true);
    } catch (err) {
      setSubmitError("Something went wrong — please email sales@trans-log.africa");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section id="contact" data-screen-label="06 Contact" style={{ padding: isTablet ? "80px 20px 60px" : "140px 28px 80px", maxWidth: 1440, margin: "0 auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: isTablet ? "1fr" : "minmax(0, 1fr) minmax(0, 1fr)", gap: isTablet ? 48 : 80, alignItems: "start" }}>
        <div>
          <Reveal><Eyebrow>{t.contact.eyebrow}</Eyebrow></Reveal>
          <Reveal delay={120}>
            <div style={{ marginTop: 22 }}><SectionTitle parts={t.contact.title} italicIndex={1} /></div>
          </Reveal>
          <Reveal delay={240}>
            <p style={{ marginTop: 28, fontSize: 16, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 460 }}>
              {t.contact.sub}
            </p>
          </Reveal>

          <Reveal delay={320}>
            <div style={{ marginTop: 56, paddingTop: 28, borderTop: "1px solid var(--line)", display: "grid", gap: 22 }}>
              <ContactRow label={t.contact.direct} value={<><a href="mailto:sales@trans-log.africa" style={{ borderBottom: "1px solid var(--ink)" }}>sales@trans-log.africa</a><br /><a href="mailto:geral@trans-log.africa" style={{ color: "var(--ink-2)" }}>geral@trans-log.africa</a></>} />
              <ContactRow label="Phone" value={<a href="tel:+258865315027" style={{ borderBottom: "1px solid var(--ink)" }}>+258 86 531 5027</a>} />
              <ContactRow label="Office" value={t.contact.address} />
            </div>
          </Reveal>
        </div>

        <Reveal delay={200}>
          <form onSubmit={submit} style={{
            background: "rgba(255,255,255,0.55)", border: "1px solid var(--line)", borderRadius: 12,
            padding: isTablet ? 24 : 32, display: "grid", gap: 18,
          }}>
            <Field label={t.contact.form.name} value={form.name} onChange={v => set("name", v)} />
            <div style={{ display: "grid", gridTemplateColumns: isTablet ? "1fr" : "1fr 1fr", gap: 14 }}>
              <Field label={t.contact.form.company} value={form.company} onChange={v => set("company", v)} />
              <Field label={t.contact.form.email} type="email" value={form.email} onChange={v => set("email", v)} />
            </div>
            <Field label={t.contact.form.phone} value={form.phone} onChange={v => set("phone", v)} />

            <div>
              <label className="mono" style={{ color: "var(--muted)", display: "block", marginBottom: 10 }}>{t.contact.form.interest}</label>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {t.contact.interests.map(opt => (
                  <button key={opt} type="button" onClick={() => set("interest", opt)}
                    style={{
                      padding: "8px 14px", borderRadius: 999, border: "1px solid var(--line)",
                      fontSize: 13, transition: "all .2s",
                      background: form.interest === opt ? "var(--ink)" : "transparent",
                      color: form.interest === opt ? "var(--bg)" : "var(--ink-2)",
                      borderColor: form.interest === opt ? "var(--ink)" : "var(--line)",
                    }}>{opt}</button>
                ))}
              </div>
            </div>

            <Field label={t.contact.form.message} value={form.message} onChange={v => set("message", v)} multiline />

            {submitError && (
              <p style={{ fontSize: 13, color: "#c0392b" }}>{submitError}</p>
            )}

            <button type="submit" disabled={submitting} style={{
              marginTop: 4, padding: "16px 24px", borderRadius: 999, background: "var(--ink)", color: "var(--bg)",
              fontSize: 14, fontWeight: 500, border: "1px solid var(--ink)", cursor: submitting ? "wait" : "pointer",
              transition: "all .3s", opacity: submitting ? 0.7 : 1,
              display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
            }}
              onMouseEnter={e => { if (!submitting) e.currentTarget.style.background = "#000"; }}
              onMouseLeave={e => e.currentTarget.style.background = "var(--ink)"}>
              {submitted ? "✓ Sent — we'll be in touch within 48h" : submitting ? "Sending…" : t.contact.form.submit}
              {!submitted && !submitting && <span>→</span>}
            </button>
          </form>
        </Reveal>
      </div>
    </section>
  );
}

function ContactRow({ label, value }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "100px 1fr", gap: 24, alignItems: "start" }}>
      <span className="mono" style={{ color: "var(--muted)" }}>{label}</span>
      <span style={{ fontSize: 15, color: "var(--ink)" }}>{value}</span>
    </div>
  );
}

function Field({ label, value, onChange, type = "text", multiline = false }) {
  const [focus, setFocus] = useStateS(false);
  const common = {
    width: "100%", border: "none", borderBottom: `1px solid ${focus ? "var(--ink)" : "var(--line)"}`,
    background: "transparent", padding: "10px 0", fontSize: 15, color: "var(--ink)",
    fontFamily: "inherit", outline: "none", transition: "border-color .25s",
    resize: multiline ? "vertical" : "none",
  };
  return (
    <label style={{ display: "block" }}>
      <span className="mono" style={{ color: "var(--muted)", display: "block", marginBottom: 4 }}>{label}</span>
      {multiline
        ? <textarea rows={3} value={value} onChange={e => onChange(e.target.value)} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} style={common} />
        : <input type={type} value={value} onChange={e => onChange(e.target.value)} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} style={common} />
      }
    </label>
  );
}

/* ================== FOOTER ================== */
function Footer({ t }) {
  const { isMobile, isTablet } = useResponsive();
  const cols = isMobile ? "1fr" : isTablet ? "1fr 1fr" : "minmax(0, 1.4fr) repeat(3, minmax(0, 1fr))";
  return (
    <footer style={{
      borderTop: "1px solid var(--line)",
      padding: isTablet ? "48px 20px 32px" : "60px 28px 40px",
      marginTop: 60,
      background: "linear-gradient(180deg, transparent, rgba(236,232,223,0.5))",
    }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: cols, gap: isTablet ? 32 : 40, paddingBottom: 60, borderBottom: "1px solid var(--line)" }}>
          <div>
            <Logo size={20} />
            <p className="serif-i" style={{ marginTop: 22, fontSize: 28, lineHeight: 1.05, letterSpacing: "-0.015em", maxWidth: 320 }}>
              {t.footer.tagline}
            </p>
          </div>
          <FooterCol title="Sitemap" links={[
            { l: t.nav.services, h: "#capabilities" },
            { l: t.nav.capabilities, h: "#catalog" },
            { l: t.nav.about, h: "#about" },
            { l: t.nav.contact, h: "#contact" },
          ]} />
          <FooterCol title="Brands" links={[
            { l: "Dell" }, { l: "HP" }, { l: "Lenovo" }, { l: "Intel" }, { l: "Cisco" },
          ]} />
          <FooterCol title="Contact" links={[
            { l: "sales@trans-log.africa", h: "mailto:sales@trans-log.africa" },
            { l: "+258 86 531 5027", h: "tel:+258865315027" },
            { l: "Av. Emília Daússe 2221" },
            { l: "Maputo · Moçambique" },
          ]} />
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 30, flexWrap: "wrap", gap: 12 }}>
          <span className="mono" style={{ color: "var(--muted)" }}>© 2025 TRANS-LOG · {t.footer.rights}</span>
          <span className="mono" style={{ color: "var(--muted)" }}>Maputo 25.9°S · 32.5°E</span>
        </div>

        <div style={{ marginTop: 40, overflow: "hidden", lineHeight: 0.85, userSelect: "none" }}>
          <div className="serif-i" style={{
            fontSize: "clamp(80px, 22vw, 320px)",
            color: "var(--ink)",
            opacity: 0.07,
            letterSpacing: "-0.04em",
            whiteSpace: "nowrap",
          }}>TRANS—LOG</div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div className="mono" style={{ color: "var(--muted)", marginBottom: 18 }}>{title}</div>
      <ul style={{ listStyle: "none", display: "grid", gap: 10 }}>
        {links.map((l, i) => (
          <li key={i} style={{ fontSize: 14, color: "var(--ink-2)" }}>
            {l.h ? <a href={l.h} style={{ borderBottom: "1px solid transparent", transition: "border-color .2s" }}
                       onMouseEnter={e => e.currentTarget.style.borderBottomColor = "var(--ink)"}
                       onMouseLeave={e => e.currentTarget.style.borderBottomColor = "transparent"}>{l.l}</a>
                  : l.l}
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { Header, Hero, Partners, Capabilities, Catalog, Process, About, Contact, Footer });