// ALTTAGSOLUTIONS — single-page site
// Section order: Hero, Logos, WhoWeAre, Services, WhyChooseUs, Work, Contact, Footer

const { useState, useEffect, useRef, useMemo, useCallback } = React;

// Sign up at formspree.io → create a form → paste the form ID here
const FORMSPREE_ID = "mbdqngod";

const ACCENTS = {
  cyan:   { hex: "#00E5FF", rgb: "0,229,255",  name: "Electric Cyan" },
  violet: { hex: "#7B61FF", rgb: "123,97,255", name: "Electric Violet" },
  lime:   { hex: "#C6FF3D", rgb: "198,255,61", name: "Acid Lime" },
};

// ---------- shared atoms ----------

function SectionLabel({ num, children }) {
  return (
    <div className="section-label">
      <span className="section-label-num">{num}</span>
      <span className="section-label-line" />
      <span className="section-label-text">{children}</span>
    </div>
  );
}

function Reveal({ children, delay = 0, as: Tag = "div", className = "" }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) setShown(true); }),
      { threshold: 0.15 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag
      ref={ref}
      className={`reveal ${shown ? "reveal-in" : ""} ${className}`}
      style={{ transitionDelay: `${delay}ms` }}
    >
      {children}
    </Tag>
  );
}

// ---------- background textures ----------

function DotMatrix() {
  return <div className="bg-texture bg-dots" aria-hidden="true" />;
}
function GridLines() {
  return <div className="bg-texture bg-grid" aria-hidden="true" />;
}
function NoiseTexture() {
  return <div className="bg-texture bg-noise" aria-hidden="true" />;
}
function BackgroundTexture({ kind }) {
  if (kind === "dots") return <DotMatrix />;
  if (kind === "grid") return <GridLines />;
  if (kind === "noise") return <NoiseTexture />;
  return null;
}

// ---------- hero animated background ----------

function ParticleField({ accent }) {
  const canvasRef = useRef(null);
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    let raf;
    let dpr = Math.min(window.devicePixelRatio || 1, 2);
    let w = 0, h = 0;
    const particles = [];
    const NUM = 70;

    function resize() {
      const r = canvas.getBoundingClientRect();
      w = r.width; h = r.height;
      canvas.width = w * dpr;
      canvas.height = h * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }
    resize();
    window.addEventListener("resize", resize);

    for (let i = 0; i < NUM; i++) {
      particles.push({
        x: Math.random() * w,
        y: Math.random() * h,
        vx: (Math.random() - 0.5) * 0.25,
        vy: (Math.random() - 0.5) * 0.25,
        r: Math.random() * 1.4 + 0.4,
      });
    }

    function frame() {
      ctx.clearRect(0, 0, w, h);
      // particles
      for (const p of particles) {
        p.x += p.vx; p.y += p.vy;
        if (p.x < 0) p.x = w; if (p.x > w) p.x = 0;
        if (p.y < 0) p.y = h; if (p.y > h) p.y = 0;
        ctx.fillStyle = `rgba(${accent},0.55)`;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fill();
      }
      // connect lines
      for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          const a = particles[i], b = particles[j];
          const dx = a.x - b.x, dy = a.y - b.y;
          const d2 = dx * dx + dy * dy;
          if (d2 < 130 * 130) {
            const alpha = (1 - Math.sqrt(d2) / 130) * 0.18;
            ctx.strokeStyle = `rgba(${accent},${alpha})`;
            ctx.lineWidth = 0.6;
            ctx.beginPath();
            ctx.moveTo(a.x, a.y);
            ctx.lineTo(b.x, b.y);
            ctx.stroke();
          }
        }
      }
      raf = requestAnimationFrame(frame);
    }
    frame();
    return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); };
  }, [accent]);

  return <canvas ref={canvasRef} className="hero-canvas" aria-hidden="true" />;
}

function ScanlineHero() {
  return (
    <div className="hero-scanlines" aria-hidden="true">
      <div className="scanline-sweep" />
    </div>
  );
}

function GradientPulseHero() {
  return <div className="hero-pulse" aria-hidden="true" />;
}

// ---------- theme + smooth scroll + scroll progress ----------
// useTheme, ThemeToggle, ScrollProgress, useSmoothScrollLinks, CountUp are loaded from shared.jsx
const { useTheme, ThemeToggle, ScrollProgress, useSmoothScrollLinks, CountUp, useActiveNav } = window;

// ---------- typewriter ----------

function Typewriter({ words, typeSpeed = 80, deleteSpeed = 40, holdMs = 1600 }) {
  const [idx, setIdx] = useState(0);
  const [text, setText] = useState(words[0]); // start fully typed for SSR-stable layout
  const [phase, setPhase] = useState("holding");
  const longest = useMemo(() => words.reduce((a, b) => (a.length > b.length ? a : b), ""), [words]);

  useEffect(() => {
    let t;
    const word = words[idx];
    if (phase === "typing") {
      if (text.length < word.length) {
        t = setTimeout(() => setText(word.slice(0, text.length + 1)), typeSpeed);
      } else {
        t = setTimeout(() => setPhase("holding"), 60);
      }
    } else if (phase === "holding") {
      t = setTimeout(() => setPhase("deleting"), holdMs);
    } else if (phase === "deleting") {
      if (text.length > 0) {
        t = setTimeout(() => setText(word.slice(0, text.length - 1)), deleteSpeed);
      } else {
        const next = (idx + 1) % words.length;
        setIdx(next);
        setPhase("typing");
      }
    }
    return () => clearTimeout(t);
  }, [text, phase, idx, words, typeSpeed, deleteSpeed, holdMs]);

  return (
    <span className="hero-headline-accent typewriter">
      <span className="typewriter-sizer" aria-hidden="true">{longest}</span>
      <span className="typewriter-text">{text}</span>
      <span className="typewriter-caret" aria-hidden="true" />
    </span>
  );
}

// ---------- HERO ----------

function Hero({ heroVariant, accentRgb, theme, onToggleTheme }) {
  return (
    <section id="hero" className="hero" data-screen-label="Hero">
      {heroVariant === "particles" && <ParticleField accent={accentRgb} />}
      {heroVariant === "scan" && <ScanlineHero />}
      {heroVariant === "pulse" && <GradientPulseHero />}

      <nav className="topnav">
        <a href="#hero" className="logo" aria-label="ALT-TAG Solutions">
          <img src="assets/logo.png" alt="ALT-TAG Solutions" className="logo-img" />
        </a>
        <ul className="topnav-links">
          <li><a href="#services">Services</a></li>
          <li><a href="#work">Work</a></li>
          <li><a href="#why">Approach</a></li>
          <li><a href="UAE.html">UAE</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <div className="topnav-right">
          <ThemeToggle theme={theme} onToggle={onToggleTheme} />
          <a href="#contact" className="topnav-cta">
            <span>Start a Project</span>
            <span className="arrow">→</span>
          </a>
        </div>
      </nav>

      <div className="hero-inner">
        <div className="hero-eyebrow">
          <span className="eyebrow-dot" />
          <span>Digital product &amp; marketing studio</span>
          <span className="eyebrow-divider">·</span>
          <span>USA &nbsp;/&nbsp; UAE</span>
        </div>

        <h1 className="hero-headline">
          We design, build,<br />
          and market<br />
          <Typewriter words={["high-performing", "high-selling", "highly interactive"]} /><br />
          digital products.
        </h1>

        <p className="hero-sub">
          <span className="hero-sub-tag">WordPress</span>
          <span className="hero-sub-sep">·</span>
          <span className="hero-sub-tag">Shopify</span>
          <span className="hero-sub-sep">·</span>
          <span className="hero-sub-tag">React / Next.js</span>
          <span className="hero-sub-sep">·</span>
          <span className="hero-sub-tag">Web3</span>
          <span className="hero-sub-sep">·</span>
          <span className="hero-sub-tag">SEO &amp; PPC</span>
        </p>

        <div className="hero-actions">
          <a href="#contact" className="btn btn-primary">
            <span>Start a Project</span>
            <span className="btn-arrow">→</span>
          </a>
          <a href="#work" className="btn btn-ghost">
            <span>See our work</span>
          </a>
        </div>

        <div className="hero-meta">
          <div className="hero-meta-item">
            <span className="hero-meta-label">Available</span>
            <span className="hero-meta-value"><span className="pulse-dot" /> Q3 2026</span>
          </div>
          <div className="hero-meta-item">
            <span className="hero-meta-label">Time zones</span>
            <span className="hero-meta-value">PST · GST</span>
          </div>
          <div className="hero-meta-item">
            <span className="hero-meta-label">Avg. response</span>
            <span className="hero-meta-value">&lt; 4 hrs</span>
          </div>
        </div>
      </div>

      <div className="hero-scroll">
        <span>Scroll</span>
        <span className="hero-scroll-line" />
      </div>
    </section>
  );
}

// ---------- LOGOS ----------

const CLIENTS = [
  { name: "Enfusion",         url: "https://companieslogo.com/img/orig/ENFN_BIG.D-b3285844.png" },
  { name: "DataChat",         url: "https://logo.clearbit.com/datachat.ai" },
  { name: "AdvizorPro",       url: "https://logo.clearbit.com/advizorpro.com" },
  { name: "True.travel",      url: "https://logo.clearbit.com/true.travel" },
  { name: "The Jacket Maker", url: "https://logo.clearbit.com/thejacketmaker.com" },
  { name: "Dr. Dabber",       url: "https://logo.clearbit.com/drdabber.com" },
  { name: "iCarCover",        url: "https://logo.clearbit.com/icarcover.com" },
  { name: "Hannoush Jewelers",url: "https://logo.clearbit.com/hannoush.com" },
  { name: "Steffi Graf",      url: "https://logo.clearbit.com/steffi-graf.net" },
  { name: "Coverland",        url: "https://logo.clearbit.com/coverland.com" },
  { name: "Porch House",      url: "https://logo.clearbit.com/porchhouse.co" },
  { name: "HireRoad",         url: "https://logo.clearbit.com/hireroad.com" },
];

function ClientLogos() {
  // Duplicate the list for seamless marquee
  const items = [...CLIENTS, ...CLIENTS];
  return (
    <section className="logos" aria-label="Client logos" data-screen-label="Clients">
      <div className="logos-rail">
        <div className="logos-track">
          {items.map((c, i) => (
            <div className="logo-item" key={i} title={c.name} aria-hidden={i >= CLIENTS.length ? "true" : undefined}>
              <img
                src={c.url}
                alt={c.name}
                loading="lazy"
                style={{ maxHeight: 40, maxWidth: 160, width: "auto", height: "auto", objectFit: "contain", display: "block" }}
                onError={(e) => {
                  e.currentTarget.style.display = "none";
                  e.currentTarget.nextSibling.style.display = "inline";
                }}
              />
              <span className="logo-item-fallback" style={{ display: "none" }}>{c.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- WHO WE ARE ----------

function WhoWeAre({ showStatsAccent }) {
  const stats = [
    { num: 10,  suf: "+",  label: "Years building",  sub: "Since 2014" },
    { num: 50,  suf: "+",  label: "Specialists",     sub: "Engineers · designers · strategists" },
    { num: 2,   suf: "",   label: "Global offices",  sub: "New York · Dubai" },
    { num: 100, suf: "+",  label: "Shipped projects",sub: "Across 14 industries" },
  ];
  return (
    <section id="who" className="who" data-screen-label="Who We Are">
      <SectionLabel num="01">Who we are</SectionLabel>
      <div className="who-grid">
        <Reveal className="who-left">
          <h2 className="who-headline">
            A studio of <span className="accent-text">engineers</span>,{" "}
            <span className="accent-text">designers</span>, and{" "}
            <span className="accent-text">growth operators</span> — building products that ship, scale, and convert.
          </h2>
          <p className="who-body">
            We work with funded startups and global brands across two continents.
            One team, one timezone overlap, zero handoff overhead. Strategy,
            engineering, and growth under a single roof.
          </p>
        </Reveal>
        <div className="who-right">
          {stats.map((s, i) => (
            <Reveal key={i} delay={i * 80} className={`stat ${showStatsAccent ? "stat-accent" : ""}`}>
              <div className="stat-num"><CountUp to={s.num} suffix={s.suf} /></div>
              <div className="stat-label">{s.label}</div>
              <div className="stat-sub">{s.sub}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- SERVICES ----------

const SERVICES = [
  {
    title: "Web & eCommerce Development",
    icon: "browser",
    bullets: [
      "WordPress, Shopify & headless builds",
      "Conversion-optimized storefronts",
      "Performance & Core Web Vitals tuning",
    ],
  },
  {
    title: "Custom Web Applications",
    icon: "code",
    bullets: [
      "React / Next.js / TypeScript",
      "API design, auth & data infrastructure",
      "Web3 contracts & wallet integrations",
    ],
  },
  {
    title: "Mobile App Development",
    icon: "phone",
    bullets: [
      "iOS & Android, native or cross-platform",
      "React Native & Swift / Kotlin",
      "App Store launch & lifecycle support",
    ],
  },
  {
    title: "SEO & PPC Growth",
    icon: "growth",
    bullets: [
      "Technical SEO & content engineering",
      "Google Ads, Meta & programmatic",
      "Analytics, attribution & CRO",
    ],
  },
];

function ServiceIcon({ kind }) {
  const common = { width: 32, height: 32, fill: "none", stroke: "currentColor", strokeWidth: 1.4 };
  if (kind === "browser") return (
    <svg {...common} viewBox="0 0 32 32"><rect x="3" y="6" width="26" height="20" /><line x1="3" y1="11" x2="29" y2="11" /><circle cx="6.5" cy="8.5" r="0.6" fill="currentColor" /><circle cx="9" cy="8.5" r="0.6" fill="currentColor" /><circle cx="11.5" cy="8.5" r="0.6" fill="currentColor" /><line x1="8" y1="17" x2="20" y2="17" /><line x1="8" y1="21" x2="16" y2="21" /></svg>
  );
  if (kind === "code") return (
    <svg {...common} viewBox="0 0 32 32"><polyline points="11,9 4,16 11,23" /><polyline points="21,9 28,16 21,23" /><line x1="18" y1="7" x2="14" y2="25" /></svg>
  );
  if (kind === "phone") return (
    <svg {...common} viewBox="0 0 32 32"><rect x="9" y="3" width="14" height="26" rx="2" /><line x1="14" y1="25" x2="18" y2="25" /><line x1="9" y1="7" x2="23" y2="7" /></svg>
  );
  if (kind === "growth") return (
    <svg {...common} viewBox="0 0 32 32"><polyline points="4,24 12,16 17,21 28,8" /><polyline points="20,8 28,8 28,16" /></svg>
  );
  return null;
}

function Services({ cardStyle }) {
  return (
    <section id="services" className="services" data-screen-label="Services">
      <SectionLabel num="02">Services</SectionLabel>
      <div className="services-head">
        <h2 className="section-headline">
          Four disciplines.<br />
          <span className="muted">One integrated team.</span>
        </h2>
        <p className="section-lede">
          From the first line of code to the last conversion event — we own the full stack.
        </p>
      </div>
      <div className={`services-grid card-style-${cardStyle}`}>
        {SERVICES.map((s, i) => (
          <Reveal key={s.title} delay={i * 60} className="service-card">
            <div className="service-card-num">0{i + 1}</div>
            <div className="service-card-icon"><ServiceIcon kind={s.icon} /></div>
            <h3 className="service-card-title">{s.title}</h3>
            <ul className="service-card-bullets">
              {s.bullets.map((b) => (
                <li key={b}><span className="bullet-dash">—</span><span>{b}</span></li>
              ))}
            </ul>
            <div className="service-card-foot">
              <span>Learn more</span>
              <span className="arrow">→</span>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ---------- WHY CHOOSE US ----------

const PILLARS = [
  {
    label: "Strategy",
    headline: "We start with the business, not the brief.",
    body: "Discovery sprints, technical audits, and growth modeling before a single pixel moves.",
    deliverables: ["Discovery", "Architecture", "Roadmap"],
  },
  {
    label: "Engineering",
    headline: "Production-grade code, day one.",
    body: "Typed, tested, observable. No throwaway prototypes — what we ship is what scales.",
    deliverables: ["Type-safe", "CI/CD", "Observability"],
  },
  {
    label: "Growth",
    headline: "Launch is the starting line.",
    body: "Performance marketing, SEO, and CRO running in lockstep with the product team.",
    deliverables: ["SEO", "Paid media", "Analytics"],
  },
];

function WhyChooseUs() {
  return (
    <section id="why" className="why" data-screen-label="Why Choose Us">
      <SectionLabel num="03">Why choose us</SectionLabel>
      <div className="why-head">
        <h2 className="section-headline">
          Three capabilities,<br />
          <span className="muted">one continuous loop.</span>
        </h2>
      </div>
      <div className="why-grid">
        {PILLARS.map((p, i) => (
          <Reveal key={p.label} delay={i * 80} className="pillar">
            <div className="pillar-top">
              <span className="pillar-num">/{String(i + 1).padStart(2, "0")}</span>
              <span className="pillar-label">{p.label}</span>
            </div>
            <h3 className="pillar-headline">{p.headline}</h3>
            <p className="pillar-body">{p.body}</p>
            <div className="pillar-deliverables">
              {p.deliverables.map((d) => (
                <span key={d} className="chip">{d}</span>
              ))}
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ---------- FEATURED WORK ----------

const PROJECTS = [
  { name: "Porch House",   category: "Brand · Web · Shopify",     year: "2025", tag: "E-commerce" },
  { name: "HireRoad",      category: "SaaS Platform · Next.js",   year: "2025", tag: "Product" },
  { name: "DataChat",      category: "Web App · React · AI",      year: "2024", tag: "AI / SaaS" },
  { name: "Tiger Ramen",   category: "Brand · Web · CMS",         year: "2024", tag: "Hospitality" },
];

function ProjectTile({ p, i }) {
  // Generate a deterministic placeholder gradient/pattern per project
  const patterns = [
    "linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 60%, #050505 100%)",
    "linear-gradient(45deg,  #141414 0%, #0a0a0a 70%)",
    "linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%)",
    "linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%)",
  ];
  return (
    <Reveal delay={i * 80} className="work-tile" as="a">
      <div className="work-tile-media" style={{ background: patterns[i % patterns.length] }}>
        <div className="work-tile-pattern" />
        <div className="work-tile-placeholder">
          <div className="placeholder-mono">project shot — {p.name.toLowerCase().replace(/\s+/g, "-")}.jpg</div>
        </div>
        <div className="work-tile-overlay">
          <div className="work-tile-overlay-inner">
            <div className="work-tile-name">{p.name}</div>
            <div className="work-tile-cat">{p.category}</div>
            <div className="work-tile-cta">
              <span>View case study</span>
              <span className="arrow">→</span>
            </div>
          </div>
        </div>
      </div>
      <div className="work-tile-meta">
        <span className="work-tile-tag">{p.tag}</span>
        <span className="work-tile-year">{p.year}</span>
      </div>
    </Reveal>
  );
}

function FeaturedWork() {
  return (
    <section id="work" className="work" data-screen-label="Featured Work">
      <SectionLabel num="04">Featured work</SectionLabel>
      <div className="work-head">
        <h2 className="section-headline">
          Selected projects,<br />
          <span className="muted">2024 — 2025.</span>
        </h2>
        <a href="#contact" className="link-arrow">
          <span>Full portfolio</span>
          <span className="arrow">→</span>
        </a>
      </div>
      <div className="work-grid">
        {PROJECTS.map((p, i) => (
          <ProjectTile key={p.name} p={p} i={i} />
        ))}
      </div>
    </section>
  );
}

// ---------- CONTACT ----------

function ContactForm() {
  const [form, setForm] = useState({ name: "", email: "", message: "" });
  const [status, setStatus] = useState("idle"); // idle | sending | sent | error
  const [errors, setErrors] = useState({});

  function validate() {
    const e = {};
    if (!form.name.trim()) e.name = "Required";
    if (!form.email.trim()) e.email = "Required";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Invalid email";
    if (!form.message.trim()) e.message = "Required";
    return e;
  }

  async function onSubmit(ev) {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length) return;
    setStatus("sending");
    try {
      const res = await fetch(`https://formspree.io/f/${FORMSPREE_ID}`, {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify(form),
      });
      if (res.ok) {
        setStatus("sent");
        setTimeout(() => { setStatus("idle"); setForm({ name: "", email: "", message: "" }); }, 3500);
      } else {
        setStatus("error");
        setTimeout(() => setStatus("idle"), 3000);
      }
    } catch {
      setStatus("error");
      setTimeout(() => setStatus("idle"), 3000);
    }
  }

  function field(key, type = "text") {
    return (
      <div className={`field ${errors[key] ? "field-error" : ""} ${form[key] ? "field-filled" : ""}`}>
        <label htmlFor={`f-${key}`}>{key.charAt(0).toUpperCase() + key.slice(1)}</label>
        {type === "textarea" ? (
          <textarea
            id={`f-${key}`}
            rows={4}
            value={form[key]}
            onChange={(e) => setForm({ ...form, [key]: e.target.value })}
          />
        ) : (
          <input
            id={`f-${key}`}
            type={type}
            value={form[key]}
            onChange={(e) => setForm({ ...form, [key]: e.target.value })}
          />
        )}
        {errors[key] && <span className="field-err">{errors[key]}</span>}
      </div>
    );
  }

  return (
    <form className="contact-form" onSubmit={onSubmit}>
      {field("name")}
      {field("email", "email")}
      {field("message", "textarea")}
      <button
        type="submit"
        className={`btn btn-primary contact-submit ${status}`}
        disabled={status === "sending" || status === "sent"}
      >
        {status === "idle" && (<><span>Send</span><span className="btn-arrow">→</span></>)}
        {status === "sending" && (<><span>Sending</span><span className="btn-spin" /></>)}
        {status === "sent" && (<><span>Message received</span><span className="btn-check">✓</span></>)}
        {status === "error" && <span>Failed — please try again</span>}
      </button>
    </form>
  );
}

function Contact() {
  return (
    <section id="contact" className="contact" data-screen-label="Contact">
      <SectionLabel num="05">Contact</SectionLabel>
      <div className="contact-grid">
        <div className="contact-left">
          <h2 className="contact-headline">
            Let's build<br />
            something <span className="accent-text">great.</span>
          </h2>
          <p className="contact-lede">
            Tell us about your project. We respond within 4 hours during business days.
          </p>

          <div className="contact-offices">
            <div className="office">
              <div className="office-flag">USA</div>
              <a className="office-email" href="mailto:hello@alttagsolutions.com">hello@alttagsolutions.com</a>
              <a className="office-phone" href="tel:+12125550199">+1 (212) 555-0199</a>
              <div className="office-addr">30 North Gould Street<br />Sheridan, WY 82801</div>
            </div>
            <div className="office">
              <div className="office-flag">UAE</div>
              <a className="office-email" href="mailto:dubai@alttagsolutions.com">dubai@alttagsolutions.com</a>
              <a className="office-phone" href="tel:+97145550182">+971 4 555 0182</a>
              <div className="office-addr">Dubai, DIFC</div>
            </div>
          </div>
        </div>
        <div className="contact-right">
          <ContactForm />
        </div>
      </div>
    </section>
  );
}

// ---------- FOOTER ----------

function Footer() {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="footer-inner">
        <div className="footer-logo">
          <img src="assets/logo.png" alt="ALT-TAG Solutions" className="footer-logo-img" />
        </div>
        <ul className="footer-nav">
          <li><a href="#services">Services</a></li>
          <li><a href="#work">Work</a></li>
          <li><a href="#why">Approach</a></li>
          <li><a href="UAE.html">UAE</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <div className="footer-meta">
          <span>© 2026 ALT-TAG SOLUTIONS</span>
          <span className="footer-dot">·</span>
          <span>USA / UAE</span>
        </div>
      </div>
      <div className="footer-bigtype" aria-hidden="true">ALT-TAG SOLUTIONS</div>
    </footer>
  );
}

// ---------- APP ----------

function App() {
  const [theme, setTheme] = useTheme();
  const accent = ACCENTS.cyan;

  useSmoothScrollLinks();
  useActiveNav(['services', 'why', 'work', 'contact']);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", accent.hex);
    root.style.setProperty("--accent-rgb", accent.rgb);
  }, []);

  return (
    <div className="site texture-dots">
      <ScrollProgress />
      <BackgroundTexture kind="dots" />
      <Hero heroVariant="particles" accentRgb={accent.rgb} theme={theme} onToggleTheme={() => setTheme(theme === "dark" ? "light" : "dark")} />
      <ClientLogos />
      <WhoWeAre showStatsAccent={true} />
      <Services cardStyle="outlined" />
      <WhyChooseUs />
      <FeaturedWork />
      <Contact />
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);