// Section components for Transdigital — composed in app.jsx
const { useEffect: tdUseEffect, useState: tdUseState, useRef: tdUseRef } = React;

// Reveal-on-scroll wrapper
function Reveal({ children, delay = 0, className = "" }) {
  const ref = tdUseRef(null);
  tdUseEffect(() => {
    const el = ref.current;
    if (!el) return;
    el.style.setProperty("--td-reveal-delay", `${delay}ms`);
    const vh = () => window.innerHeight || document.documentElement.clientHeight;
    const reveal = () => { el.classList.add("in"); cleanup(); };
    const check = () => {
      const r = el.getBoundingClientRect();
      // If overlapping viewport or already scrolled past in either direction, reveal.
      if (r.top < vh() * 0.9 || r.bottom < vh()) { reveal(); return true; }
      return false;
    };
    if (check()) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) reveal();
    }, { threshold: 0.15, rootMargin: "0px 0px -10% 0px" });
    obs.observe(el);
    const onScroll = () => { check(); };
    window.addEventListener("scroll", onScroll, { passive: true });
    function cleanup() {
      obs.disconnect();
      window.removeEventListener("scroll", onScroll);
    }
    return cleanup;
  }, [delay]);
  return <div ref={ref} className={`td-reveal ${className}`}>{children}</div>;
}

// ====== NAV ======
function Nav({ t, lang, setLang }) {
  return (
    <nav className="td-nav">
      <div className="td-nav-inner">
        <a href="#top" className="td-brand">
          <div className="td-brand-mark"></div>
          <span className="td-brand-name">Transdigital</span>
          <span className="td-brand-sub">// MZ-001</span>
        </a>
        <div className="td-nav-links">
          <a className="td-nav-link" href="#solutions">{t.nav.solutions}</a>
          <a className="td-nav-link" href="#vendors">{t.nav.vendors}</a>
          <a className="td-nav-link" href="#services">{t.nav.services}</a>
          <a className="td-nav-link" href="#insights">{t.nav.insights}</a>
          <a className="td-nav-link" href="#contact">{t.nav.contact}</a>
        </div>
        <div className="td-nav-right">
          <div className="td-lang">
            <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
            <button className={lang === "pt" ? "active" : ""} onClick={() => setLang("pt")}>PT</button>
          </div>
          <a href="#contact" className="td-cta-mini">{t.nav.contact}</a>
        </div>
      </div>
      <div className="td-nav-mobile">
        <a className="td-nav-mobile-link" href="#solutions">{t.nav.solutions}</a>
        <a className="td-nav-mobile-link" href="#vendors">{t.nav.vendors}</a>
        <a className="td-nav-mobile-link" href="#services">{t.nav.services}</a>
        <a className="td-nav-mobile-link" href="#insights">{t.nav.insights}</a>
        <a className="td-nav-mobile-link" href="#contact">{t.nav.contact}</a>
      </div>
    </nav>
  );
}

// ====== HERO ======
function Hero({ t, heroVariant }) {
  if (heroVariant === "B") return <HeroB t={t} />;
  return <HeroA t={t} />;
}

function HeroA({ t }) {
  const titles = {
    a: t.hero.title_a, b: t.hero.title_b, c: t.hero.title_c, d: t.hero.title_d, e: t.hero.title_e,
  };
  return (
    <section id="top" className="td-hero" data-screen-label="01 Hero">
      <div className="td-hero-bg">
        <div className="td-hero-grid"></div>
      </div>
      <div className="td-container td-hero-inner">
        <div>
          <div className="td-hero-kicker">
            <Kicker label={t.hero.kicker.replace(/[\[\]]/g, "")} accent />
          </div>
          <h1 className="td-h1">
            <span className="td-h1-line"><span>{titles.a}</span></span>
            <span className="td-h1-line"><span>{titles.b}</span></span>
            <span className="td-h1-line"><span><i className="accent">{titles.c}</i></span></span>
            <span className="td-h1-line"><span>{titles.d}</span></span>
            <span className="td-h1-line"><span>{titles.e}<span className="td-cursor" /></span></span>
          </h1>
          <p className="td-hero-sub">{t.hero.sub}</p>
          <div className="td-hero-ctas">
            <a href="#contact" className="td-btn td-btn-primary">{t.hero.cta_a}</a>
            <a href="#contact" className="td-btn">{t.hero.cta_b}</a>
          </div>
        </div>
        <Reveal delay={400}>
          <HeroPanel t={t} />
        </Reveal>
      </div>
    </section>
  );
}

function HeroB({ t }) {
  const [time, setTime] = tdUseState("");
  tdUseEffect(() => {
    const tick = () => {
      const d = new Date();
      const pad = (n) => String(n).padStart(2, "0");
      setTime(`${d.getUTCFullYear()}.${pad(d.getUTCMonth()+1)}.${pad(d.getUTCDate())} ${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())} UTC`);
    };
    tick();
    const i = setInterval(tick, 1000);
    return () => clearInterval(i);
  }, []);
  return (
    <section id="top" className="td-hero-b" data-screen-label="01 Hero">
      <div className="td-hero-b-bg"></div>
      <div className="td-hero-b-grid"></div>
      <div className="td-hero-b-mark" aria-hidden="true"></div>
      <div className="td-hero-b-frame"></div>
      <div className="td-hero-b-tick tl"></div>
      <div className="td-hero-b-tick tr"></div>
      <div className="td-hero-b-tick bl"></div>
      <div className="td-hero-b-tick br"></div>

      <div className="td-hero-b-top">
        <span><span className="accent">●</span> TRANSDIGITAL // MZ-001 // {time}</span>
        <span>OPS-FEED LIVE · 99.987% UPTIME</span>
      </div>

      <div className="td-hero-b-rail left">LAT −25.97° · LON 32.58° · MAPUTO HQ · PALOPs</div>
      <div className="td-hero-b-rail right">VND-06 · {t.metrics.coverage} <span className="accent">●</span></div>

      <div className="td-hero-b-content">
        <div className="td-hero-b-kicker">
          <span className="dot"></span>
          <span>{t.hero.kicker.replace(/[\[\]]/g, "").trim()}</span>
        </div>

        <h1 className="td-hero-b-headline">
          {t.hero.title_a} {t.hero.title_b}
          {' '}<span className="accent">{t.hero.title_c}</span>{' '}
          {t.hero.title_d} {t.hero.title_e}<span className="td-cursor" />
        </h1>

        <div>
          <div className="td-hero-b-bottom">
            <p className="td-hero-b-sub">{t.hero.sub}</p>
            <div className="td-hero-b-actions">
              <a href="#contact" className="td-btn td-btn-primary">{t.hero.cta_a}</a>
              <a href="#contact" className="td-btn">{t.hero.cta_b}</a>
            </div>
          </div>
          <div className="td-hero-b-mini">
            <div className="td-hero-b-mini-cell">
              <div className="td-hero-b-mini-label">{t.metrics.partners}</div>
              <div className="td-hero-b-mini-value"><span className="accent">06</span> · AUTHORIZED</div>
            </div>
            <div className="td-hero-b-mini-cell">
              <div className="td-hero-b-mini-label">{t.metrics.seats}</div>
              <div className="td-hero-b-mini-value"><LiveNumber value={4218} jitter={0.0006} /></div>
            </div>
            <div className="td-hero-b-mini-cell">
              <div className="td-hero-b-mini-label">{t.metrics.since}</div>
              <div className="td-hero-b-mini-value">2019 · MAPUTO</div>
            </div>
          </div>
        </div>
      </div>

      <div className="td-hero-b-bot">
        <span>SCROLL ↓</span>
        <span>VENDORS · SOLUTIONS · SERVICES · PROOF</span>
        <span><span className="accent">[ EST. 2019 ]</span></span>
      </div>
    </section>
  );
}

function HeroPanel({ t }) {
  const [time, setTime] = tdUseState("");
  tdUseEffect(() => {
    const tick = () => {
      const d = new Date();
      const pad = (n) => String(n).padStart(2, "0");
      setTime(`${d.getUTCFullYear()}.${pad(d.getUTCMonth()+1)}.${pad(d.getUTCDate())} // ${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())} UTC`);
    };
    tick();
    const i = setInterval(tick, 1000);
    return () => clearInterval(i);
  }, []);
  return (
    <div className="td-hero-panel">
      <div className="td-panel-bar">
        <span>// OPS-FEED // {time}</span>
        <span className="dots">
          <span className="dot"></span>
          <span className="dot"></span>
          <span className="dot live"></span>
        </span>
      </div>
      <div className="td-panel-readout">
        <div className="td-readout-row">
          <div className="td-readout-label">{t.metrics.uptime}</div>
          <div className="td-readout-value"><LiveNumber value={99.987} decimals={3} suffix="%" jitter={0.00002} /></div>
        </div>
        <div className="td-readout-row">
          <div className="td-readout-label">{t.metrics.seats}</div>
          <div className="td-readout-value"><LiveNumber value={4218} jitter={0.0006} /></div>
        </div>
        <div className="td-readout-row">
          <div className="td-readout-label">{t.metrics.partners}</div>
          <div className="td-readout-value"><span className="accent">06</span></div>
        </div>
        <div className="td-readout-row">
          <div className="td-readout-label">{t.metrics.clients}</div>
          <div className="td-readout-value"><LiveNumber value={87} jitter={0} live={false} />+</div>
        </div>
      </div>
      <TerminalWave height={64} lines={3} accent="oklch(0.86 0.18 138)" />
      <CodeStream density={6} />
    </div>
  );
}

// ====== STATS strip ======
function StatsStrip({ t }) {
  const stats = [
    { v: "99.98", u: "%", l: t.metrics.uptime },
    { v: "4,218", u: "", l: t.metrics.seats },
    { v: "06", u: "", l: t.metrics.partners, accent: true },
    { v: "87", u: "+", l: t.metrics.clients },
    { v: "2019", u: "", l: t.metrics.since },
    { v: "PALOP", u: "", l: t.metrics.coverage, accent: true },
  ];
  return (
    <div className="td-stats" data-screen-label="02 Stats strip">
      <div className="td-stats-grid">
        {stats.map((s, i) => (
          <div key={i} className="td-stat">
            <div className="td-stat-label">[ {String(i+1).padStart(2, "0")} ] {s.l}</div>
            <div className="td-stat-value">
              <span className={s.accent ? "accent" : ""}>{s.v}</span>
              {s.u && <span className="unit">{s.u}</span>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Elegant decorative schematic — geometric tracery (no logos), used as a background motif
function Schematic({ variant = "a", className = "" }) {
  // Variant A: technical drawing with bezier arcs + nodes (vendor section)
  // Variant B: floor-plan grid + dimension lines (CTA)
  if (variant === "b") {
    return (
      <svg className={`td-schematic ${className}`} viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
        <defs>
          <pattern id="sch-grid-b" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M40 0H0V40" fill="none" stroke="currentColor" strokeWidth="0.4" opacity="0.5"/>
          </pattern>
        </defs>
        <rect width="1600" height="900" fill="url(#sch-grid-b)"/>
        <g fill="none" stroke="currentColor" strokeWidth="0.8">
          <rect x="120" y="120" width="560" height="360"/>
          <rect x="680" y="120" width="260" height="180"/>
          <rect x="680" y="300" width="260" height="180"/>
          <rect x="120" y="480" width="820" height="260"/>
          <rect x="940" y="120" width="540" height="620"/>
          <line x1="940" y1="260" x2="1480" y2="260"/>
          <line x1="940" y1="440" x2="1480" y2="440"/>
          <line x1="940" y1="600" x2="1480" y2="600"/>
          <line x1="1180" y1="120" x2="1180" y2="740"/>
        </g>
        <g stroke="currentColor" strokeWidth="0.5" opacity="0.6">
          <line x1="100" y1="100" x2="100" y2="760"/>
          <line x1="96" y1="100" x2="104" y2="100"/>
          <line x1="96" y1="760" x2="104" y2="760"/>
          <line x1="120" y1="780" x2="1480" y2="780"/>
          <line x1="120" y1="776" x2="120" y2="784"/>
          <line x1="1480" y1="776" x2="1480" y2="784"/>
        </g>
        <g fill="currentColor" fontFamily="ui-monospace, monospace" fontSize="9" opacity="0.55">
          <text x="82" y="434" transform="rotate(-90 82 434)">SHT 01 / 12 · PALOP COVERAGE</text>
          <text x="800" y="802" textAnchor="middle">DIM 13.6KM · SCALE 1:200 · WGS-84</text>
          <text x="130" y="112">A1</text>
          <text x="690" y="112">B1</text>
          <text x="950" y="112">C1</text>
          <text x="130" y="492">A2</text>
        </g>
        <g fill="currentColor" opacity="0.7">
          <circle cx="120" cy="120" r="3"/>
          <circle cx="680" cy="480" r="3"/>
          <circle cx="940" cy="480" r="3"/>
          <circle cx="1480" cy="740" r="3"/>
        </g>
      </svg>
    );
  }
  // Variant A: BIM/circuit-board tracery with bezier curves and nodes
  return (
    <svg className={`td-schematic ${className}`} viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <pattern id="sch-grid-a" width="32" height="32" patternUnits="userSpaceOnUse">
          <circle cx="0" cy="0" r="0.6" fill="currentColor" opacity="0.45"/>
        </pattern>
      </defs>
      <rect width="1600" height="900" fill="url(#sch-grid-a)"/>
      <g fill="none" stroke="currentColor" strokeWidth="0.8" opacity="0.85">
        <path d="M-40 200 C 220 200 220 360 480 360 S 740 520 1000 520 S 1260 360 1640 360"/>
        <path d="M-40 540 C 240 540 240 700 520 700 S 800 560 1080 560 S 1340 700 1640 700"/>
        <path d="M200 -20 L 200 240 L 360 400 L 360 920"/>
        <path d="M820 -20 L 820 180 L 1020 380 L 1020 920"/>
        <path d="M1280 -20 L 1280 320 L 1100 500 L 1100 920"/>
        <circle cx="480" cy="360" r="36"/>
        <circle cx="480" cy="360" r="56"/>
        <circle cx="1100" cy="500" r="24"/>
        <circle cx="1100" cy="500" r="40"/>
        <path d="M460 360 L 500 360 M 480 340 L 480 380"/>
        <path d="M1080 500 L 1120 500"/>
      </g>
      <g fill="currentColor" opacity="0.7">
        <circle cx="200" cy="240" r="2.4"/>
        <circle cx="360" cy="400" r="2.4"/>
        <circle cx="820" cy="180" r="2.4"/>
        <circle cx="1020" cy="380" r="2.4"/>
        <circle cx="1280" cy="320" r="2.4"/>
      </g>
      <g fill="currentColor" fontFamily="ui-monospace, monospace" fontSize="9" opacity="0.55">
        <text x="500" y="354">N-04 · NODE</text>
        <text x="1118" y="494">N-12 · LINK</text>
        <text x="30" y="214">L01</text>
        <text x="30" y="554">L02</text>
        <text x="212" y="30">V01</text>
        <text x="832" y="30">V02</text>
        <text x="1292" y="30">V03</text>
      </g>
    </svg>
  );
}

Object.assign(window, { Schematic });

// ====== VENDORS ======
const VENDOR_LIST = [
  { id: "fluxo",    name: "Fluxo Dynamics", sub: "htech.africa · Engineering Ops",   num: "01", url: "https://www.htech.africa" },
  { id: "daon",     name: "Daon",           sub: "IdentityX · TrustX · xProof",      num: "02", url: "https://www.daon.com" },
  { id: "autodesk", name: "Autodesk",       sub: "AEC Collection · ACC · Revit",     num: "03", url: "https://www.autodesk.com/collections/architecture-engineering-construction/overview" },
  { id: "bentley",  name: "Bentley",        sub: "OpenRoads · OpenBuildings · iTwin", num: "04", url: "https://www.bentley.com" },
  { id: "prokon",   name: "Prokon",         sub: "Structural · Concrete · Steel",    num: "05", url: "https://www.prokon.com" },
  { id: "snow",     name: "Snow Software",  sub: "Atlas · SaaS · License Manager",   num: "06", url: "https://www.flexera.com/products/snow-software.html" },
  { id: "adobe",    name: "Adobe",          sub: "Creative Cloud · Acrobat · Sign",  num: "07", url: "https://www.adobe.com/creativecloud.html" },
];

function Vendors({ t }) {
  const tickerItems = [
    "AUTHORIZED PARTNER", "FLUXO DYNAMICS", "DAON", "AUTODESK", "BENTLEY", "PROKON", "SNOW SOFTWARE", "ADOBE",
    "AUTHORIZED RESELLER", "VENDOR-CREDENTIALED", "MAPUTO // MZ", "PALOP COVERAGE",
  ];
  return (
    <>
      <div className="td-vendor-marquee" data-screen-label="03 Vendor marquee">
        <Ticker items={tickerItems} speed={50} separator="·" />
      </div>
      <SectionFrame id="vendors" idx="03" label={t.vendors.kicker} title={t.vendors.title} sub={t.vendors.sub}>
        <Schematic variant="a" className="td-schematic-vendors" />
        <Reveal>
          <div className="td-vendors-grid">
            {VENDOR_LIST.map((v) => {
              const Tag = v.url ? "a" : "div";
              const linkProps = v.url ? { href: v.url, target: "_blank", rel: "noopener noreferrer" } : {};
              return (
                <Tag key={v.id} className="td-vendor-cell" data-tint={v.id} {...linkProps}>
                  <div className="td-vendor-num"><span className="id">VND-{v.num}</span> // {TD_seed(v.num.charCodeAt(0)+v.num.charCodeAt(1))}</div>
                  <div>
                    <div className="td-vendor-wm">{v.name}</div>
                    <div className="td-vendor-sub">{v.sub}</div>
                  </div>
                  <div className="td-vendor-tag">Authorized partner</div>
                  <div className="td-vendor-arrow">↗</div>
                </Tag>
              );
            })}
          </div>
        </Reveal>
      </SectionFrame>
    </>
  );
}

// ====== SOLUTIONS (sticky scenes with imagery placeholders) ======
function Solutions({ t }) {
  const sols = [
    {
      data: t.solutions.aec,
      img: "uploads/vendor-aec-prokon.jpg",
      meta: "BIM-MODEL // R-2026.4 // 24,118 ELEMENTS",
    },
    {
      data: t.solutions.lic,
      img: "uploads/vendor-licensing-flexera.png",
      meta: "LICENSE-AUDIT // Q1-2026 // 1,840 RECLAIMED",
    },
    {
      data: t.solutions.id,
      img: "uploads/vendor-identity-daon.jpg",
      meta: "IDENTITY-X // V12.4 // LIVENESS PASS-99.7%",
    },
  ];
  return (
    <SectionFrame id="solutions" idx="04" label={t.solutions.kicker} title={t.solutions.title} sub={t.solutions.sub}>
      <div className="td-sols-track">
        {sols.map((s, i) => (
          <div className="td-sol" key={i}>
            <div className="td-sol-text">
              <Reveal delay={0}>
                <div className="td-sol-tag">[ {String(i+1).padStart(2,"0")} / {s.data.tag} ]</div>
              </Reveal>
              <Reveal delay={80}>
                <h3 className="td-sol-h">{s.data.title}</h3>
              </Reveal>
              <Reveal delay={140}>
                <p className="td-sol-d">{s.data.desc}</p>
              </Reveal>
              <Reveal delay={200}>
                <ul className="td-sol-points">
                  {s.data.points.map((p, k) => <li key={k} className="td-sol-point">{p}</li>)}
                </ul>
              </Reveal>
            </div>
            <div className="td-sol-vis">
              <img src={s.img} alt="" loading="lazy" onError={(e) => { e.currentTarget.style.display = 'none'; }} />
              <div className="td-scanlines"></div>
              <div className="td-sol-vis-meta">
                <span className="live">{s.meta}</span>
                <span>SCN-{String(i+1).padStart(2,"0")}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </SectionFrame>
  );
}

// ====== SERVICES ======
function Services({ t }) {
  return (
    <SectionFrame id="services" idx="05" label={t.services.kicker} title={t.services.title}>
      <div className="td-svc-grid">
        {t.services.items.map((s, i) => (
          <Reveal key={i} delay={i * 80}>
            <div className="td-svc">
              <div className="td-svc-num">[ {s.num} ]</div>
              <div className="td-svc-t">{s.t}</div>
              <div className="td-svc-d">{s.d}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </SectionFrame>
  );
}

// ====== PROOF / case studies ======
function Proof({ t }) {
  return (
    <SectionFrame id="proof" idx="06" label={t.proof.kicker} title={t.proof.title}>
      <div className="td-cases">
        {t.proof.cases.map((c, i) => (
          <Reveal key={i} delay={i * 80}>
            <div className="td-case">
              <div className="td-case-tag">{c.tag}</div>
              <div>
                <div className="td-case-client">{c.client}</div>
              </div>
              <div className="td-case-body">{c.body}</div>
              <div className="td-case-stat">
                <div className="td-case-stat-num"><span className="accent">{c.stat}</span></div>
                <div className="td-case-stat-lbl">{c.statLabel}</div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </SectionFrame>
  );
}

// ====== PRESENCE / map ======
function Presence({ t }) {
  // hand-tuned positions across an Africa-centric map for PALOP cities
  // Maputo MZ (HQ), Luanda AO, Praia CV, Bissau GW, São Tomé ST
  const pins = [
    { ...t.presence.items[0], x: 56, y: 72, hq: true },
    { ...t.presence.items[1], x: 44, y: 56 },
    { ...t.presence.items[2], x: 24, y: 36 },
    { ...t.presence.items[3], x: 26, y: 42 },
    { ...t.presence.items[4], x: 40, y: 50 },
  ];
  return (
    <SectionFrame id="presence" idx="07" label={t.presence.kicker} title={t.presence.title} sub={t.presence.sub}>
      <div className="td-presence">
        <div className="td-presence-list">
          {t.presence.items.map((p, i) => (
            <Reveal key={i} delay={i * 60}>
              <div className="td-presence-row">
                <div className="td-presence-city">{p.city}</div>
                <div className="td-presence-role">{p.role}</div>
                <div className="td-presence-coords">{p.coords}</div>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={200}>
          <div className="td-map">
            <div className="td-map-grid"></div>
            {pins.map((p, i) => (
              <div key={i} style={{ position: "absolute", left: `${p.x}%`, top: `${p.y}%` }}>
                <div className={`td-map-pin ${p.hq ? "hq" : ""}`}></div>
                <div className="td-map-pin-label">{p.city}</div>
              </div>
            ))}
            <div className="td-map-scale">
              <span>SCALE 1:24M</span>
              <span>WGS-84 // PROJ-MERC</span>
            </div>
          </div>
        </Reveal>
      </div>
    </SectionFrame>
  );
}

// ====== INSIGHTS ======
function Insights({ t }) {
  return (
    <SectionFrame id="insights" idx="08" label={t.insights.kicker} title={t.insights.title}>
      <div className="td-insights-list">
        {t.insights.items.map((it, i) => {
          const Tag = it.url ? "a" : "div";
          const linkProps = it.url ? { href: it.url, target: "_blank", rel: "noopener noreferrer" } : {};
          return (
            <Reveal key={i} delay={i * 50}>
              <Tag className={`td-insight${it.url ? " td-insight--link" : ""}`} {...linkProps}>
                <div className="td-insight-date">{it.date}</div>
                <div className="td-insight-title">{it.t}</div>
                <div className="td-insight-min">{it.min}</div>
                {it.url && <div className="td-insight-arrow">↗</div>}
              </Tag>
            </Reveal>
          );
        })}
      </div>
    </SectionFrame>
  );
}

// ====== CTA ======
function CTA({ t }) {
  return (
    <section id="contact" className="td-cta" data-screen-label="09 CTA">
      <div className="td-cta-bg"></div>
      <Schematic variant="b" className="td-schematic-cta" />
      <Reveal>
        <Kicker index="09" label={t.cta.kicker} accent />
        <h2 className="td-cta-h">{t.cta.title}<span className="td-cursor" /></h2>
        <p className="td-cta-sub">{t.cta.sub}</p>
        <div className="td-cta-actions">
          <a href="mailto:geral@transdigital-mz.com" className="td-btn td-btn-primary">{t.cta.primary}</a>
          <a href="tel:+25821087927" className="td-btn">{t.cta.secondary}</a>
        </div>
      </Reveal>
    </section>
  );
}

// ====== CONTACT ======
const SUPABASE_URL      = "https://kecvpvsisbfwyxwjekat.supabase.co";
const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImtlY3ZwdnNpc2Jmd3l4d2pla2F0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTU1NDE1NTksImV4cCI6MjA3MTExNzU1OX0.gP_N4lDA1wGSCCucZDb50lVX4kV6wzuUeJA3pZHokkw";
const TD_TENANT_ID      = "237ebf61-40fd-4260-a900-a25c4a9f4907";

function Contact({ t }) {
  const tc = t.contact;
  const [submitted, setSubmitted] = tdUseState(false);
  const [submitting, setSubmitting] = tdUseState(false);
  const [submitError, setSubmitError] = tdUseState(null);
  const [form, setForm] = tdUseState({
    name: "", company: "", email: "", phone: "",
    interest: tc.interests[0], message: "",
  });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = async (e) => {
    e.preventDefault();
    if (!form.name.trim() || !form.email.trim()) return;
    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: TD_TENANT_ID },
      });
      if (error) throw error;
      setSubmitted(true);
    } catch (_) {
      setSubmitError(tc.form.error);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section id="contact" className="td-contact">
      <div className="td-contact-inner">

        <div className="td-contact-left">
          <Reveal>
            <p className="td-label td-label--accent">{tc.kicker}</p>
            <h2 className="td-contact-title">{tc.title}</h2>
            <p className="td-contact-sub">{tc.sub}</p>
          </Reveal>
          <Reveal delay={120}>
            <div className="td-contact-details">
              <div className="td-contact-detail">
                <span className="td-contact-detail-label">Email</span>
                <a href="mailto:geral@transdigital-mz.com" className="td-contact-detail-value">geral@transdigital-mz.com</a>
              </div>
              <div className="td-contact-detail">
                <span className="td-contact-detail-label">Phone</span>
                <a href="tel:+25821087927" className="td-contact-detail-value">+258 21 087 927</a>
              </div>
              <div className="td-contact-detail">
                <span className="td-contact-detail-label">Office</span>
                <span className="td-contact-detail-value">{tc.address}</span>
              </div>
            </div>
          </Reveal>
        </div>

        <Reveal delay={160} className="td-contact-right">
          {submitted ? (
            <div className="td-contact-success">
              <span className="td-contact-success-icon">✓</span>
              <p>{tc.form.sent}</p>
            </div>
          ) : (
            <form className="td-contact-form" onSubmit={submit} noValidate>
              <div className="td-contact-row td-contact-row--2">
                <div className="td-contact-field">
                  <label className="td-contact-label">{tc.form.name} *</label>
                  <input className="td-contact-input" value={form.name}
                    onChange={e => set("name", e.target.value)} autoComplete="name" required />
                </div>
                <div className="td-contact-field">
                  <label className="td-contact-label">{tc.form.email} *</label>
                  <input className="td-contact-input" type="email" value={form.email}
                    onChange={e => set("email", e.target.value)} autoComplete="email" required />
                </div>
              </div>
              <div className="td-contact-row td-contact-row--2">
                <div className="td-contact-field">
                  <label className="td-contact-label">{tc.form.company}</label>
                  <input className="td-contact-input" value={form.company}
                    onChange={e => set("company", e.target.value)} autoComplete="organization" />
                </div>
                <div className="td-contact-field">
                  <label className="td-contact-label">{tc.form.phone}</label>
                  <input className="td-contact-input" value={form.phone}
                    onChange={e => set("phone", e.target.value)} autoComplete="tel" />
                </div>
              </div>

              <div className="td-contact-field">
                <label className="td-contact-label">{tc.form.interest} *</label>
                <div className="td-contact-pills">
                  {tc.interests.map(opt => (
                    <button key={opt} type="button"
                      className={`td-contact-pill${form.interest === opt ? " td-contact-pill--active" : ""}`}
                      onClick={() => set("interest", opt)}>{opt}</button>
                  ))}
                </div>
              </div>

              <div className="td-contact-field">
                <label className="td-contact-label">{tc.form.message}</label>
                <textarea className="td-contact-input td-contact-textarea" rows={4}
                  value={form.message} onChange={e => set("message", e.target.value)} />
              </div>

              {submitError && <p className="td-contact-error">{submitError}</p>}

              <button type="submit" className="td-contact-submit"
                disabled={submitting || !form.name.trim() || !form.email.trim()}>
                {submitting ? "…" : tc.form.submit}
              </button>
            </form>
          )}
        </Reveal>

      </div>
    </section>
  );
}

// ====== FOOTER ======
function Footer({ t }) {
  return (
    <footer className="td-footer-rich">
      <div className="td-footer-grid">
        <div className="td-footer-col td-footer-col--brand">
          <div className="td-footer-mark">
            <span className="td-footer-dot"></span>
            <span>TRANSDIGITAL</span>
          </div>
          <div className="td-footer-tag">{t.footer.copy}</div>
        </div>
        <div className="td-footer-col">
          <div className="td-footer-h">[ HQ ]</div>
          <div className="td-footer-line">{t.footer.addr}</div>
          <div className="td-footer-line td-footer-mute">−25.97°, 32.58° · GMT+02</div>
        </div>
        <div className="td-footer-col">
          <div className="td-footer-h">[ Contact ]</div>
          <a className="td-footer-link" href={`mailto:${t.footer.email}`}>{t.footer.email}</a>
          <a className="td-footer-link" href={`tel:${t.footer.phone.replace(/\s/g, "")}`}>{t.footer.phone}</a>
        </div>
        <div className="td-footer-col">
          <div className="td-footer-h">[ Support ]</div>
          <a className="td-footer-link" href={`mailto:${t.footer.support}`}>{t.footer.support}</a>
          <div className="td-footer-line td-footer-mute">SLA · Mon–Fri 08–18 GMT+02</div>
        </div>
      </div>
      <div className="td-footer-bot">
        <span>© {new Date().getFullYear()} Transdigital, Lda</span>
        <span>V.2026.05 · PALOPs</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Reveal, Nav, Hero, StatsStrip, Vendors, Solutions, Services, Proof, Presence, Insights, CTA, Footer });