// Sections: Nav, Hero, Manifesto, Services, Method, Audience, Contact, Footer

const Nav = ({ t, lang, setLang, fonts }) => {
  const [open, setOpen] = React.useState(false);
  const ignoreScroll = React.useRef(false);
  // Lock body scroll when menu open
  React.useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = open ? "hidden" : prev || "";
    return () => { document.body.style.overflow = prev; };
  }, [open]);
  // Close on ESC
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);
  const go = (id) => {
    setOpen(false);
    const el = document.getElementById(id);
    if (el) {
      ignoreScroll.current = true;
      const navEl = document.querySelector(".fa-nav");
      const offset = (navEl ? navEl.getBoundingClientRect().height : 60) + 8;
      window.scrollTo({ top: el.offsetTop - offset, behavior: "smooth" });
      setTimeout(() => { ignoreScroll.current = false; }, 1200);
    }
  };
  return (
    <nav className={`fa-nav ${open ? "is-open" : ""}`}>
      <div className="fa-container fa-nav-inner">
        <div className="fa-brand" onClick={() => { setOpen(false); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
          <img src="assets/logo-horizontal.png" alt="Fuente Alquimia" className="fa-brand-logo" />
        </div>
        <div className="fa-nav-links">
          <span className="fa-nav-link" onClick={() => go("services")}>{t.nav.services}</span>
          <span className="fa-nav-link" onClick={() => go("brands")}>{t.nav.work}</span>
          <span className="fa-nav-link" onClick={() => go("contact")}>{t.nav.contact}</span>
        </div>
        <button
          type="button"
          className="fa-nav-burger"
          aria-label={open ? "Cerrar menú" : "Abrir menú"}
          aria-expanded={open}
          onClick={(e) => { e.preventDefault(); e.stopPropagation(); setOpen(o => !o); }}
          onTouchEnd={(e) => { e.preventDefault(); e.stopPropagation(); setOpen(o => !o); }}
          style={{ position: 'relative', zIndex: 200 }}
        >
          <span></span><span></span><span></span>
        </button>
      </div>
      <div className="fa-nav-sheet" aria-hidden={!open}>
        <div className="fa-nav-sheet-links">
          <button className="fa-nav-sheet-link" onClick={() => go("services")}>{t.nav.services}</button>
          <button className="fa-nav-sheet-link" onClick={() => go("brands")}>{t.nav.work}</button>
          <button className="fa-nav-sheet-link" onClick={() => go("contact")}>{t.nav.contact}</button>
        </div>
      </div>
    </nav>
  );
};

const HeroVideo = () => {
  const ref = React.useRef(null);
  const [src, setSrc] = React.useState(null);
  React.useEffect(() => {
    let url = null;
    let cancelled = false;
    fetch("assets/hero-loop.mp4")
      .then((r) => r.blob())
      .then((blob) => {
        if (cancelled) return;
        url = URL.createObjectURL(blob);
        setSrc(url);
      })
      .catch(() => {});
    return () => {
      cancelled = true;
      if (url) URL.revokeObjectURL(url);
    };
  }, []);
  return (
    <video
      ref={ref}
      className="fa-hero-video"
      autoPlay
      muted
      loop
      playsInline
      preload="auto"
      src={src || undefined}
      aria-hidden="true"
    />
  );
};

const Hero = ({ t, layout = "photo" }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => {
      const el = ref.current;
      if (!el) return;
      const y = window.scrollY;
      const h = window.innerHeight;
      // Fade out by 60% scroll of viewport, parallax up
      const progress = Math.min(1, y / (h * 0.7));
      const opacity = 1 - progress;
      const translate = y * 0.3; // parallax: move slower than scroll
      el.style.setProperty("--hero-fade", opacity);
      el.style.setProperty("--hero-shift", `${translate}px`);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
  <section ref={ref} className={`fa-hero fa-hero--${layout} fa-hero--parallax`} id="hero">
    {layout === "video" ? <HeroVideo /> : null}
    {layout === "ink" ? (
      <svg className="fa-hero-ink-svg" viewBox="0 0 1200 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
        <defs>
          <radialGradient id="fa-hero-gold-1" cx="50%" cy="50%">
            <stop offset="0%" stopColor="#d4a859" stopOpacity="0.9" />
            <stop offset="60%" stopColor="#a07e32" stopOpacity="0.4" />
            <stop offset="100%" stopColor="#6e5018" stopOpacity="0" />
          </radialGradient>
          <radialGradient id="fa-hero-gold-2" cx="50%" cy="50%">
            <stop offset="0%" stopColor="#e8c878" stopOpacity="0.85" />
            <stop offset="55%" stopColor="#b8884a" stopOpacity="0.35" />
            <stop offset="100%" stopColor="#6a4818" stopOpacity="0" />
          </radialGradient>
          <radialGradient id="fa-hero-gold-3" cx="50%" cy="50%">
            <stop offset="0%" stopColor="#c9a961" stopOpacity="0.8" />
            <stop offset="65%" stopColor="#8a6a2a" stopOpacity="0.3" />
            <stop offset="100%" stopColor="#5a4418" stopOpacity="0" />
          </radialGradient>
        </defs>
        <ellipse className="blob blob-1" cx="900" cy="450" rx="280" ry="220" fill="url(#fa-hero-gold-1)" />
        <ellipse className="blob blob-2" cx="780" cy="600" rx="220" ry="260" fill="url(#fa-hero-gold-2)" />
        <ellipse className="blob blob-3" cx="1000" cy="280" rx="200" ry="180" fill="url(#fa-hero-gold-3)" />
        <ellipse className="blob blob-4" cx="850" cy="180" rx="240" ry="200" fill="url(#fa-hero-gold-1)" />
      </svg>
    ) : null}
    <div className="fa-container" style={{ position: "relative", zIndex: 2 }}>
      {t.hero.eyebrow ? (
        <Reveal>
          <div className="fa-hero-eyebrow">
            <span className="fa-mono">{t.hero.eyebrow}</span>
          </div>
        </Reveal>
      ) : null}
      <div className="fa-hero-grid">
        <div>
          <Reveal delay={120}>
            <h1 className="fa-hero-title">
              <span className="line">{t.hero.title[0]}</span>
              <span className="line accent">{t.hero.title[1]}</span>
            </h1>
          </Reveal>
          <Reveal delay={280}>
            <p className="fa-hero-lede">{t.hero.lede}</p>
          </Reveal>
          <Reveal delay={420}>
            <button className="fa-cta" onClick={() => {
              const el = document.getElementById("contact");
              if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
            }}>
              {t.hero.cta}
              <span className="fa-cta-arrow">→</span>
            </button>
          </Reveal>
        </div>
      </div>
    </div>
  </section>
  );
};

const Manifesto = ({ t }) => (
  <section className="fa-section" id="manifesto">
    <div className="fa-container">
      <div className="fa-manifesto-grid">
        <Reveal>
          <div className="fa-section-eyebrow">
            <span className="fa-mono">{t.manifesto.eyebrow}</span>
          </div>
          <h2 className="fa-section-title">
            {t.manifesto.title.split("\n").map((line, i) => (
              <span key={i} style={{ display: "block", fontStyle: "normal", color: i === 1 ? "var(--fa-gold)" : "inherit" }}>
                {line}
              </span>
            ))}
          </h2>
        </Reveal>
        <div>
          <Reveal delay={150}>
            <div className="fa-manifesto-text">
              {t.manifesto.paragraphs.map((p, i) => <p key={i}>{p}</p>)}
              {t.manifesto.signature && (
                <div className="fa-manifesto-sig">
                  <div className="fa-manifesto-sig-rule" />
                  <div className="fa-manifesto-sig-name">{t.manifesto.signature.name}</div>
                  <div className="fa-manifesto-sig-role">{t.manifesto.signature.role}</div>
                </div>
              )}
            </div>
          </Reveal>
        </div>
      </div>
    </div>
  </section>
);

const Service = ({ item, labels, isOpen, onToggle }) => (
  <div className={`fa-service ${isOpen ? "is-open" : ""}`}>
    <div className="fa-service-row" onClick={onToggle}>
      <div className="fa-service-glyph"><Icon name={item.glyph} size={32} /></div>
      <div>
        <div className="fa-service-title">{item.title}</div>
        <div className="fa-service-subtitle">{item.subtitle}</div>
      </div>
      <div className="fa-service-summary hide-sm">{item.summary}</div>
      <div className="fa-service-toggle">
        <span className="icon">+</span>
      </div>
    </div>
    <div className="fa-service-detail">
      <div className="fa-service-detail-spacer" />
      <div className="fa-service-detail-spacer" />
      <div className="fa-service-body">
        <div>
          <h4>{labels.focus}</h4>
          <ul>{item.focus.map((f, i) => <li key={i}>{f}</li>)}</ul>
        </div>
        <div>
          <h4>{labels.format}</h4>
          <ul>{item.format.map((f, i) => <li key={i}>{f}</li>)}</ul>
        </div>
        <div className="fa-service-result">
          <h4>{labels.result}</h4>
          <p>{item.result}</p>
        </div>
      </div>
    </div>
  </div>
);

const ServicesDial = ({ t }) => {
  const [active, setActive] = React.useState(0);
  const items = t.services.items;
  const cur = items[active];
  return (
    <div className="fa-dial-wrap">
      {/* Mobile: horizontal tab strip */}
      <div className="fa-dial-tabs" role="tablist">
        {items.map((s, i) => (
          <button key={i}
            className={`fa-dial-tab ${active===i?"is-active":""}`}
            onClick={() => setActive(i)}
            aria-label={s.title}
            role="tab"
            aria-selected={active===i}>
            <span className="g"><Icon name={s.glyph} size={20} /></span>
            <span className="n">{s.number}</span>
          </button>
        ))}
      </div>

      {/* Desktop: vertical timeline + content */}
      <div className="fa-vline">
        <div className="fa-vline-rail" role="tablist">
          {items.map((s, i) => (
            <button key={i}
              className={`fa-vline-step ${active===i?"is-active":""}`}
              onClick={() => setActive(i)}
              aria-label={s.title}
              role="tab"
              aria-selected={active===i}>
              <span className="dot">
                <Icon name={s.glyph} size={22} />
              </span>
              <span className="meta">
                <span className="n">{s.number}</span>
                <span className="lbl">{s.title}</span>
              </span>
            </button>
          ))}
        </div>

        <div className="fa-vline-content" key={`vc-${active}`}>
          <h3 className="fa-vline-title">{cur.title}</h3>
          <div className="fa-vline-rule" />
          <div className="fa-vline-meta fa-mono">{cur.subtitle}</div>
          <p className="fa-vline-summary">{cur.summary}</p>

          <div className="fa-dial-result fa-dial-result--inline">
            <h4>{t.services.labels.result}</h4>
            <p>{cur.result}</p>
            <a href="#contact" className="fa-dial-result-cta">
              {t.services.labels.cta}
              <Icon name="direction" size={14} />
            </a>
          </div>
        </div>
      </div>

      {/* Mobile-only headline (replaces vline content layout) */}
      <div className="fa-dial-mhead" key={`h-${active}`}>
        <div className="g"><Icon name={cur.glyph} size={32} /></div>
        <div className="num fa-mono">{cur.number}</div>
        <h3 className="ttl">{cur.title}</h3>
        <div className="sub fa-mono">{cur.subtitle}</div>
        <p className="fa-vline-summary">{cur.summary}</p>
      </div>

      <div className={`fa-dial-detail ${cur.glyph === "brand" ? "fa-dial-detail--simple" : ""}`} key={`d-${active}`}>
      </div>
    </div>
  );
};

const ServicesHead = ({ t, center = false }) => (
  <div className={`fa-services-head ${center ? "is-center" : ""}`}>
    <Reveal>
      <div>
        <div className="fa-section-eyebrow" style={center ? { justifyContent: "center", display: "flex" } : {}}>
          <span className="fa-mono">{t.services.eyebrow}</span>
        </div>
        <h2 className="fa-section-title">
          {t.services.title.split("\n").map((line, i) => (
            <span key={i} style={{ display: "block", fontStyle: "normal", color: i === 1 ? "var(--fa-gold)" : "inherit" }}>{line}</span>
          ))}
        </h2>
      </div>
    </Reveal>
    <Reveal delay={180}>
      {t.services.lede && <p className="fa-services-lede">{t.services.lede}</p>}
    </Reveal>
  </div>
);

// ---- 1 · LIST (accordion actual) ----
const ServicesList = ({ t }) => {
  const [open, setOpen] = React.useState(-1);
  return (
    <React.Fragment>
      <ServicesHead t={t} />
      {/* Mobile: cards apiladas (todas visibles) */}
      <div className="fa-services-mobile">
        <div className="fa-svc-stack">
          {t.services.items.map((item, i) => (
            <Reveal key={i} delay={120 + i * 90}>
              <article className="fa-svc-card">
                <header className="fa-svc-card-head">
                  <div className="fa-svc-card-glyph"><Icon name={item.glyph} size={56} /></div>
                </header>
                <div className="fa-svc-card-body">
                  <h3 className="fa-svc-card-title">{item.title}</h3>
                  <div className="fa-svc-card-sub fa-mono">{item.subtitle}</div>
                  <p className="fa-svc-card-summary">{item.summary}</p>
                  {item.format && item.format.length > 0 && (
                    <ul className="fa-svc-card-outcomes">
                      {item.format.slice(0, 3).map((o, k) => (
                        <li key={k}>{o}</li>
                      ))}
                    </ul>
                  )}
                </div>
              </article>
            </Reveal>
          ))}
        </div>
        <Reveal delay={120 + t.services.items.length * 90}>
          <a href="#contact" className="fa-svc-stack-cta">
            <span>{t.services.labels.cta}</span>
            <span aria-hidden="true">→</span>
          </a>
        </Reveal>
      </div>
      {/* Desktop: accordion list (sin cambios) */}
      <Reveal delay={120}>
        <div className="fa-services-list fa-services-desktop">
          {t.services.items.map((item, i) => (
            <Service
              key={i}
              item={item}
              labels={t.services.labels}
              isOpen={open === i}
              onToggle={() => setOpen(open === i ? -1 : i)}
            />
          ))}
        </div>
      </Reveal>
    </React.Fragment>
  );
};

// ---- 2 · PICTOGRAMA XL ----
const ServicesPictogram = ({ t }) => (
  <React.Fragment>
    <ServicesHead t={t} center />
    <div className="fa-svc-pic-grid">
      {t.services.items.map((item, i) => (
        <Reveal key={i} delay={150 + i * 100}>
          <a href="#contact" className="fa-svc-pic">
            <div className="fa-svc-pic-num fa-mono">{item.number}</div>
            <div className="fa-svc-pic-glyph"><Icon name={item.glyph} size={120} /></div>
            <h3 className="fa-svc-pic-title">{item.title}</h3>
            <div className="fa-svc-pic-sub fa-mono">{item.subtitle}</div>
          </a>
        </Reveal>
      ))}
    </div>
  </React.Fragment>
);

// ---- 3 · NUMERAL monumental ----
const ServicesNumeral = ({ t }) => (
  <React.Fragment>
    <ServicesHead t={t} />
    <div className="fa-svc-num-list">
      {t.services.items.map((item, i) => (
        <Reveal key={i} delay={120 + i * 90}>
          <a href="#contact" className="fa-svc-num-row">
            <div className="fa-svc-num-big">{item.number}</div>
            <div className="fa-svc-num-body">
              <div className="fa-svc-num-glyph"><Icon name={item.glyph} size={36} /></div>
              <div>
                <div className="fa-svc-num-title">{item.title}</div>
                <div className="fa-svc-num-sub fa-mono">{item.subtitle}</div>
              </div>
            </div>
            <div className="fa-svc-num-arrow" aria-hidden="true">→</div>
          </a>
        </Reveal>
      ))}
    </div>
  </React.Fragment>
);

// ---- 4 · TRIADA radial ----
const ServicesTriad = ({ t }) => (
  <React.Fragment>
    <ServicesHead t={t} center />
    <Reveal delay={200}>
      <div className="fa-svc-tri-stage">
        <svg className="fa-svc-tri-svg" viewBox="0 0 800 720" aria-hidden="true">
          <polygon points="400,80 720,640 80,640" fill="none" stroke="var(--fa-line-strong)" strokeWidth="1" strokeDasharray="4 4" />
          <circle cx="400" cy="380" r="80" fill="var(--fa-bg)" stroke="var(--fa-gold)" />
        </svg>
        <div className="fa-svc-tri-core">
          <span className="fa-mono">{t.services.eyebrow}</span>
        </div>
        {t.services.items.map((item, i) => (
          <div key={i} className={`fa-svc-tri-node fa-svc-tri-node-${i + 1}`}>
            <div className="fa-svc-tri-glyph"><Icon name={item.glyph} size={40} /></div>
            <div className="fa-svc-tri-num fa-mono">{item.number}</div>
            <div className="fa-svc-tri-title">{item.title}</div>
            <div className="fa-svc-tri-sub fa-mono">{item.subtitle}</div>
          </div>
        ))}
      </div>
    </Reveal>
  </React.Fragment>
);

// ---- 5 · CARDS verticales con glyph hero ----
const ServicesVCards = ({ t }) => (
  <React.Fragment>
    <ServicesHead t={t} />
    <div className="fa-svc-vc-grid">
      {t.services.items.map((item, i) => (
        <Reveal key={i} delay={150 + i * 100}>
          <a href="#contact" className="fa-svc-vc">
            <div className="fa-svc-vc-hero">
              <Icon name={item.glyph} size={88} />
            </div>
            <div className="fa-svc-vc-body">
              <div className="fa-svc-vc-num fa-mono">{item.number}</div>
              <h3 className="fa-svc-vc-title">{item.title}</h3>
              <div className="fa-svc-vc-sub fa-mono">{item.subtitle}</div>
              <div className="fa-svc-vc-cta">
                <span>{t.services.labels.cta}</span>
                <span aria-hidden="true">→</span>
              </div>
            </div>
          </a>
        </Reveal>
      ))}
    </div>
  </React.Fragment>
);

// ---- 6 · MINIMAL — glyph + duración ----
const ServicesMinimal = ({ t }) => (
  <React.Fragment>
    <ServicesHead t={t} />
    <div className="fa-svc-mn-list">
      {t.services.items.map((item, i) => (
        <Reveal key={i} delay={100 + i * 70}>
          <a href="#contact" className="fa-svc-mn-row">
            <span className="fa-svc-mn-num fa-mono">{item.number}</span>
            <span className="fa-svc-mn-glyph"><Icon name={item.glyph} size={32} /></span>
            <span className="fa-svc-mn-title">{item.title}</span>
            <span className="fa-svc-mn-rule" aria-hidden="true" />
            <span className="fa-svc-mn-sub fa-mono">{item.subtitle}</span>
          </a>
        </Reveal>
      ))}
    </div>
  </React.Fragment>
);

// ---- 7 · FLOW horizontal con conexión ----
const ServicesFlow = ({ t }) => (
  <React.Fragment>
    <ServicesHead t={t} center />
    <Reveal delay={200}>
      <div className="fa-svc-fl-stage">
        <div className="fa-svc-fl-line" aria-hidden="true" />
        {t.services.items.map((item, i) => (
          <div key={i} className="fa-svc-fl-step">
            <div className="fa-svc-fl-orb">
              <Icon name={item.glyph} size={32} />
            </div>
            <div className="fa-svc-fl-num fa-mono">{item.number}</div>
            <div className="fa-svc-fl-title">{item.title}</div>
            <div className="fa-svc-fl-sub fa-mono">{item.subtitle}</div>
          </div>
        ))}
      </div>
    </Reveal>
  </React.Fragment>
);

// ---- 8 · EMBLEM (cartel/postal) ----
const ServicesEmblem = ({ t }) => (
  <React.Fragment>
    <ServicesHead t={t} />
    <div className="fa-svc-em-grid">
      {t.services.items.map((item, i) => (
        <Reveal key={i} delay={150 + i * 100}>
          <a href="#contact" className="fa-svc-em">
            <div className="fa-svc-em-frame">
              <div className="fa-svc-em-corner fa-svc-em-corner-tl" />
              <div className="fa-svc-em-corner fa-svc-em-corner-tr" />
              <div className="fa-svc-em-corner fa-svc-em-corner-bl" />
              <div className="fa-svc-em-corner fa-svc-em-corner-br" />
              <div className="fa-svc-em-num fa-mono">{item.number}</div>
              <div className="fa-svc-em-glyph">
                <Icon name={item.glyph} size={140} />
              </div>
              <div className="fa-svc-em-rule" />
              <div className="fa-svc-em-title">{item.title}</div>
              <div className="fa-svc-em-sub fa-mono">{item.subtitle}</div>
            </div>
          </a>
        </Reveal>
      ))}
    </div>
  </React.Fragment>
);

// ---------- 9 · EDITORIAL — índice de libro ----------
const ServicesEditorial = ({ t }) => {
  const [open, setOpen] = React.useState(-1);
  return (
    <React.Fragment>
      <ServicesHead t={t} />
      <div className="fa-svc-ed-list">
        {t.services.items.map((item, i) => {
          const isOpen = open === i;
          return (
            <Reveal key={i} delay={120 + i * 80}>
              <article
                className={`fa-svc-ed ${isOpen ? "is-open" : ""}`}
                onClick={() => setOpen(isOpen ? -1 : i)}
              >
                <div className="fa-svc-ed-row">
                  <div className="fa-svc-ed-glyph">
                    <Icon name={item.glyph} size={64} />
                  </div>
                  <div className="fa-svc-ed-titles">
                    <div className="fa-svc-ed-sub fa-mono">{item.subtitle}</div>
                    <h3 className="fa-svc-ed-title">{item.title}</h3>
                  </div>
                  <p className="fa-svc-ed-quote">{item.summary}</p>
                  <div className="fa-svc-ed-toggle" aria-hidden="true">
                    {isOpen ? "−" : "+"}
                  </div>
                </div>
                <div className="fa-svc-ed-detail">
                  <div className="fa-svc-ed-cols">
                    <div className="fa-svc-ed-col">
                      <h4 className="fa-mono">{t.services.labels.focus}</h4>
                      <ul>
                        {item.focus.map((f, k) => <li key={k}>{f}</li>)}
                      </ul>
                    </div>
                    <div className="fa-svc-ed-col">
                      <h4 className="fa-mono">{t.services.labels.format}</h4>
                      <ul>
                        {item.format.map((f, k) => <li key={k}>{f}</li>)}
                      </ul>
                    </div>
                  </div>
                  <div className="fa-svc-ed-seal">
                    <div className="fa-svc-ed-seal-mark">
                      <Icon name={item.glyph} size={48} />
                    </div>
                    <div className="fa-svc-ed-seal-body">
                      <div className="fa-svc-ed-seal-label fa-mono">
                        {t.services.labels.result}
                      </div>
                      <p>{item.result}</p>
                    </div>
                  </div>
                  <a href="#contact" className="fa-svc-ed-cta">
                    <span>{t.services.labels.cta}</span>
                    <span aria-hidden="true">→</span>
                  </a>
                </div>
              </article>
            </Reveal>
          );
        })}
      </div>
    </React.Fragment>
  );
};

// ---------- 10 · STICKY — sticky scroll cinematográfico ----------
const ServicesSticky = ({ t }) => {
  const [active, setActive] = React.useState(0);
  const refs = React.useRef([]);
  React.useEffect(() => {
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            const idx = Number(e.target.getAttribute("data-idx"));
            setActive(idx);
          }
        });
      },
      { rootMargin: "-40% 0px -40% 0px", threshold: 0 }
    );
    refs.current.forEach((r) => r && obs.observe(r));
    return () => obs.disconnect();
  }, []);
  const cur = t.services.items[active] || t.services.items[0];
  return (
    <React.Fragment>
      <ServicesHead t={t} />
      <div className="fa-svc-st-stage">
        <aside className="fa-svc-st-pinned">
          <div className="fa-svc-st-pinned-inner">
            <div className="fa-svc-st-progress fa-mono">
              <span>{String(active + 1).padStart(2, "0")}</span>
              <span className="fa-svc-st-progress-sep" />
              <span>{String(t.services.items.length).padStart(2, "0")}</span>
            </div>
            <div className="fa-svc-st-glyph">
              <Icon name={cur.glyph} size={140} />
            </div>
            <div className="fa-svc-st-sub fa-mono">{cur.subtitle}</div>
            <h3 className="fa-svc-st-title">{cur.title}</h3>
            <p className="fa-svc-st-summary">{cur.summary}</p>
            <a href="#contact" className="fa-svc-st-cta">
              <span>{t.services.labels.cta}</span>
              <span aria-hidden="true">→</span>
            </a>
          </div>
        </aside>
        <div className="fa-svc-st-scroll">
          {t.services.items.map((item, i) => (
            <article
              key={i}
              ref={(el) => (refs.current[i] = el)}
              data-idx={i}
              className={`fa-svc-st-pane ${active === i ? "is-active" : ""}`}
            >
              <div className="fa-svc-st-pane-head">
                <span className="fa-svc-st-pane-num fa-mono">
                  {String(i + 1).padStart(2, "0")}
                </span>
                <span className="fa-svc-st-pane-title">{item.title}</span>
              </div>
              <div className="fa-svc-st-pane-cols">
                <div>
                  <h4 className="fa-mono">{t.services.labels.focus}</h4>
                  <ul>{item.focus.map((f, k) => <li key={k}>{f}</li>)}</ul>
                </div>
                <div>
                  <h4 className="fa-mono">{t.services.labels.format}</h4>
                  <ul>{item.format.map((f, k) => <li key={k}>{f}</li>)}</ul>
                </div>
              </div>
              <div className="fa-svc-st-pane-result">
                <span className="fa-mono">{t.services.labels.result}</span>
                <p>{item.result}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </React.Fragment>
  );
};

// ---------- 11 · AUDIENCE — anclaje en tipología de cliente ----------
const ServicesAudience = ({ t }) => {
  const [active, setActive] = React.useState(0);
  const items = t.services.items;
  const cur = items[active];
  return (
    <React.Fragment>
      <ServicesHead t={t} />
      <div className="fa-svc-au-shell">
        <div className="fa-svc-au-list">
          {items.map((item, i) => (
            <button
              key={i}
              className={`fa-svc-au-row ${active === i ? "is-active" : ""}`}
              onClick={() => setActive(i)}
            >
              <span className="fa-svc-au-row-for fa-mono">
                {t.services.labels.focus}
              </span>
              <span className="fa-svc-au-row-line">
                <span className="fa-svc-au-row-glyph">
                  <Icon name={item.glyph} size={28} />
                </span>
                <span className="fa-svc-au-row-title">{item.subtitle}</span>
              </span>
              <span className="fa-svc-au-row-svc fa-mono">{item.title}</span>
            </button>
          ))}
        </div>
        <aside className="fa-svc-au-detail">
          <div className="fa-svc-au-detail-glyph">
            <Icon name={cur.glyph} size={120} />
          </div>
          <div className="fa-svc-au-detail-eyebrow fa-mono">
            {cur.subtitle}
          </div>
          <h3 className="fa-svc-au-detail-title">{cur.title}</h3>
          <p className="fa-svc-au-detail-summary">{cur.summary}</p>
          <div className="fa-svc-au-detail-result">
            <span className="fa-mono">{t.services.labels.result}</span>
            <p>{cur.result}</p>
          </div>
          <a href="#contact" className="fa-svc-au-detail-cta">
            <span>{t.services.labels.cta}</span>
            <span aria-hidden="true">→</span>
          </a>
        </aside>
      </div>
    </React.Fragment>
  );
};

const Services = ({ t, layout = "list" }) => {
  const variants = {
    list: ServicesList,
    pictogram: ServicesPictogram,
    numeral: ServicesNumeral,
    triad: ServicesTriad,
    vcards: ServicesVCards,
    minimal: ServicesMinimal,
    flow: ServicesFlow,
    emblem: ServicesEmblem,
    editorial: ServicesEditorial,
    sticky: ServicesSticky,
    audience: ServicesAudience,
  };
  const View = variants[layout] || ServicesList;
  return (
    <section className={`fa-section fa-services fa-services--${layout}`} id="services">
      <div className="fa-container">
        <View t={t} />
      </div>
    </section>
  );
};

// ---------- METHOD LAYOUTS ----------

const MethodSplit = ({ t }) => (
  <div className="fa-method-grid">
    <div>
      <Reveal>
        <div className="fa-section-eyebrow"><span className="fa-mono">{t.method.eyebrow}</span></div>
        <h2 className="fa-section-title">
          {t.method.title.split("\n").map((line, i) => (
            <span key={i} style={{ display: "block", fontStyle: "normal", color: i === 1 ? "var(--fa-gold)" : "inherit" }}>{line}</span>
          ))}
        </h2>
      </Reveal>
      <Reveal delay={180}>
        <div className="fa-method-negatives">
          {t.method.negatives.map((n, i) => <div key={i} className="fa-method-neg">{n}</div>)}
        </div>
      </Reveal>
    </div>
    <Reveal delay={250}>
      <div className="fa-method-positives">
        {t.method.positives.map((p, i) => (
          <div key={i} className="fa-method-pos">
            <div className="fa-method-pos-icon">
              {p.glyph ? <Icon name={p.glyph} size={22} /> : null}
            </div>
            <div>
              <div className="fa-method-pos-label">{p.label}</div>
              <div className="fa-method-pos-note">{p.note}</div>
            </div>
          </div>
        ))}
      </div>
    </Reveal>
  </div>
);

const MethodHeader = ({ t, center = false }) => (
  <div className={`fa-met-head ${center ? "is-center" : ""}`}>
    <Reveal>
      <div className="fa-section-eyebrow" style={center ? { justifyContent: "center", display: "flex" } : {}}>
        <span className="fa-mono">{t.method.eyebrow}</span>
      </div>
      <h2 className="fa-section-title">
        {t.method.title.split("\n").map((line, i) => (
          <span key={i} style={{ display: "block", fontStyle: "normal", color: i === 1 ? "var(--fa-gold)" : "inherit" }}>{line}</span>
        ))}
      </h2>
    </Reveal>
  </div>
);

const MethodSteps = ({ t }) => {
  const [active, setActive] = React.useState(0);
  const items = t.method.positives;
  return (
    <div className="fa-met--steps">
      <MethodHeader t={t} />
      <Reveal delay={150}>
        <div className="fa-met-steps-rail">
          <div className="fa-met-steps-track" />
          <div className="fa-met-steps-fill" style={{ width: `${((active + 1) / items.length) * 100}%` }} />
          <div className="fa-met-steps-nodes">
            {items.map((p, i) => (
              <button key={i}
                className={`fa-met-steps-node ${i <= active ? "is-on" : ""} ${i === active ? "is-active" : ""}`}
                onClick={() => setActive(i)}
                aria-label={p.label}>
                <span className="fa-mono fa-met-steps-num">{String(i + 1).padStart(2, "0")}</span>
              </button>
            ))}
          </div>
        </div>
      </Reveal>
      <Reveal delay={250}>
        <div className="fa-met-steps-grid">
          {items.map((p, i) => (
            <div key={i}
              className={`fa-met-steps-card ${i === active ? "is-active" : ""}`}
              onClick={() => setActive(i)}>
              <div className="fa-met-steps-card-num fa-mono">{String(i + 1).padStart(2, "0")} / {String(items.length).padStart(2, "0")}</div>
              <div className="fa-met-steps-card-icon">{p.glyph ? <Icon name={p.glyph} size={26} /> : null}</div>
              <div className="fa-met-steps-card-label">{p.label}</div>
              <div className="fa-met-steps-card-note">{p.note}</div>
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  );
};

const MethodTabs = ({ t }) => {
  const [active, setActive] = React.useState(0);
  const items = t.method.positives;
  return (
    <div className="fa-met--tabs">
      <MethodHeader t={t} />
      <Reveal delay={180}>
        <div className="fa-met-tabs-wrap">
          <div className="fa-met-tabs-list" role="tablist">
            {items.map((p, i) => (
              <button key={i}
                role="tab"
                aria-selected={i === active}
                className={`fa-met-tabs-tab ${i === active ? "is-active" : ""}`}
                onClick={() => setActive(i)}>
                <span className="fa-mono fa-met-tabs-num">{String(i + 1).padStart(2, "0")}</span>
                <span className="fa-met-tabs-label">{p.label}</span>
              </button>
            ))}
          </div>
          <div className="fa-met-tabs-panel">
            <div className="fa-met-tabs-icon">
              {items[active].glyph ? <Icon name={items[active].glyph} size={36} /> : null}
            </div>
            <div className="fa-met-tabs-headline">{items[active].label}</div>
            <div className="fa-met-tabs-body">{items[active].note}</div>
          </div>
        </div>
      </Reveal>
    </div>
  );
};

const MethodDiagram = ({ t }) => {
  const items = t.method.positives;
  return (
    <div className="fa-met--diagram">
      <MethodHeader t={t} center />
      <Reveal delay={200}>
        <div className="fa-met-dg-stage">
          <div className="fa-met-dg-orbit fa-met-dg-orbit-1" aria-hidden="true" />
          <div className="fa-met-dg-orbit fa-met-dg-orbit-2" aria-hidden="true" />
          <div className="fa-met-dg-core">
            <span className="fa-mono">{t.method.eyebrow}</span>
          </div>
          {items.map((p, i) => (
            <div key={i} className={`fa-met-dg-node fa-met-dg-node-${i + 1}`}>
              <div className="fa-met-dg-icon">{p.glyph ? <Icon name={p.glyph} size={20} /> : null}</div>
              <div className="fa-met-dg-text">
                <div className="fa-met-dg-label">{p.label}</div>
                <div className="fa-met-dg-note">{p.note}</div>
              </div>
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  );
};

const MethodCards = ({ t }) => (
  <div className="fa-met--cards">
    <MethodHeader t={t} />
    <div className="fa-met-cards-grid">
      {t.method.positives.map((p, i) => (
        <Reveal key={i} delay={150 + i * 80}>
          <article className="fa-met-card">
            <div className="fa-met-card-top">
              <span className="fa-mono fa-met-card-num">{String(i + 1).padStart(2, "0")}</span>
              <span className="fa-met-card-icon">{p.glyph ? <Icon name={p.glyph} size={22} /> : null}</span>
            </div>
            <h3 className="fa-met-card-label">{p.label}</h3>
            <p className="fa-met-card-note">{p.note}</p>
            <div className="fa-met-card-rule" aria-hidden="true" />
          </article>
        </Reveal>
      ))}
    </div>
  </div>
);

const MethodStack = ({ t }) => (
  <div className="fa-met--stack">
    <MethodHeader t={t} />
    <ol className="fa-met-stack-list">
      {t.method.positives.map((p, i) => (
        <Reveal key={i} delay={120 + i * 70}>
          <li className="fa-met-stack-item">
            <span className="fa-met-stack-num">{String(i + 1).padStart(2, "0")}</span>
            <div className="fa-met-stack-body">
              <div className="fa-met-stack-label">{p.label}</div>
              <div className="fa-met-stack-note">{p.note}</div>
            </div>
            <span className="fa-met-stack-glyph">{p.glyph ? <Icon name={p.glyph} size={28} /> : null}</span>
          </li>
        </Reveal>
      ))}
    </ol>
  </div>
);

const MethodMarquee = ({ t }) => {
  const [active, setActive] = React.useState(0);
  const items = t.method.positives;
  const cur = items[active];
  return (
    <div className="fa-met--marquee">
      <MethodHeader t={t} />
      <Reveal delay={150}>
        <div className="fa-met-mq-strip" role="tablist">
          {items.map((p, i) => (
            <button key={i}
              role="tab"
              aria-selected={i === active}
              className={`fa-met-mq-chip ${i === active ? "is-active" : ""}`}
              onMouseEnter={() => setActive(i)}
              onFocus={() => setActive(i)}
              onClick={() => setActive(i)}>
              <span className="fa-mono fa-met-mq-num">{String(i + 1).padStart(2, "0")}</span>
              <span className="fa-met-mq-label">{p.label}</span>
            </button>
          ))}
        </div>
      </Reveal>
      <Reveal delay={250}>
        <div className="fa-met-mq-detail">
          <div className="fa-met-mq-icon">{cur.glyph ? <Icon name={cur.glyph} size={48} /> : null}</div>
          <div className="fa-met-mq-headline">{cur.label}</div>
          <div className="fa-met-mq-body">{cur.note}</div>
        </div>
      </Reveal>
    </div>
  );
};

const MethodTimeline = ({ t }) => (
  <div className="fa-met--timeline">
    <div className="fa-met-tl-grid">
      <MethodHeader t={t} />
      <ol className="fa-met-tl-list">
        <span className="fa-met-tl-line" aria-hidden="true" />
        {t.method.positives.map((p, i) => (
          <Reveal key={i} delay={120 + i * 80}>
            <li className="fa-met-tl-item">
              <span className="fa-met-tl-dot" aria-hidden="true">
                <span className="fa-met-tl-dot-inner" />
              </span>
              <div className="fa-met-tl-body">
                <div className="fa-met-tl-num fa-mono">{String(i + 1).padStart(2, "0")} · {t.method.eyebrow}</div>
                <div className="fa-met-tl-label">{p.label}</div>
                <div className="fa-met-tl-note">{p.note}</div>
              </div>
            </li>
          </Reveal>
        ))}
      </ol>
    </div>
  </div>
);

// ---------- 9 · SIMPLE — editorial mínima ----------
const MethodSimple = ({ t }) => (
  <div className="fa-method-simple">
    <Reveal>
      <div className="fa-method-simple-eyebrow fa-mono">{t.method.eyebrow}</div>
    </Reveal>
    <Reveal delay={120}>
      <h2 className="fa-method-simple-title">
        {t.method.title.split("\n").map((line, i) => (
          <span
            key={i}
            style={{
              display: "block",
              fontStyle: "normal",
              color: i === 1 ? "var(--fa-gold)" : "inherit",
              fontWeight: i === 1 ? "var(--fa-body-weight, 300)" : "var(--fa-headline-weight, 700)",
            }}
          >
            {line}
          </span>
        ))}
      </h2>
    </Reveal>
    <div className="fa-method-simple-list">
      {t.method.positives.map((p, i) => (
        <Reveal key={i} delay={200 + i * 100}>
          <div className="fa-method-simple-row">
            <span className="fa-method-simple-num fa-mono">
              {String(i + 1).padStart(2, "0")}
            </span>
            <div className="fa-method-simple-body">
              <h3 className="fa-method-simple-label">{p.label}</h3>
              <p className="fa-method-simple-note">{p.note}</p>
            </div>
          </div>
        </Reveal>
      ))}
    </div>
  </div>
);

const Method = ({ t, layout = "split" }) => {
  const variants = {
    split: MethodSplit,
    simple: MethodSimple,
    steps: MethodSteps,
    tabs: MethodTabs,
    diagram: MethodDiagram,
    cards: MethodCards,
    stack: MethodStack,
    marquee: MethodMarquee,
    timeline: MethodTimeline,
  };
  const View = variants[layout] || MethodSplit;
  return (
    <section className={`fa-section fa-method fa-method--${layout}`} id="method">
      <div className="fa-container">
        <View t={t} />
      </div>
    </section>
  );
};

const Clients = ({ t }) => (
  <section className="fa-clients" id="clients">
    <div className="fa-container">
      <Reveal>
        <div className="fa-section-eyebrow">
          <span className="fa-mono">{t.clients.eyebrow}</span>
        </div>
      </Reveal>
      <Reveal delay={120}>
        <h2 className="fa-section-title fa-clients-title">
          {t.clients.title.split("\n").map((l, i) => (
            <span key={i} style={{ display: "block" }}>{l}</span>
          ))}
        </h2>
      </Reveal>
      <Reveal delay={240}>
        <div className="fa-clients-strip">
          <img src="assets/clients-logos-dark.png" alt="Clientes y proyectos" />
        </div>
      </Reveal>
    </div>
  </section>
);

// Per-logo height tuning: stacked logos can be tall, wordmarks need to be shorter
// so the type doesn't dwarf neighbours. Width caps prevent any single logo from
// dominating its cell. Height in px (cell is ~95px tall).
const BRANDS_LIST = [
  // Stacked / iconic logos (mostly square-ish)
  { name: "Solen Group", src: "assets/logo-solen-clean.png?v=3", h: 72, type: "stacked" },
  { name: "Akbal Music", src: "assets/brand-akbalmusic-clean.png?v=3", h: 72, type: "stacked" },
  { name: "Hotelshops", src: "assets/brand-hotelshops-clean.png?v=3", h: 72, type: "stacked" },
  // Wordmarks / wide logos
  { name: "American Sign", src: "assets/brand-americansign-clean.png?v=3", h: 28, type: "wordmark" },
  { name: "Akbal Collection", src: "assets/logo-akbal-clean.png?v=3", h: 30, type: "wordmark" },
  { name: "Muralia Decoprint", src: "assets/brand-muralia-clean.png?v=3", h: 38, type: "wordmark" },
];

const BrandImg = ({ brand, scale = 1 }) => (
  <img
    src={brand.src}
    alt={brand.name}
    style={{
      height: (brand.h * scale) + "px",
      maxHeight: (brand.h * scale) + "px",
      width: "auto",
      maxWidth: "85%",
    }}
  />
);

const BrandCell = ({ brand, scale }) => (
  <div className="fa-brand-cell">
    <BrandImg brand={brand} scale={scale} />
  </div>
);

// === Layout: Marquee horizontal infinito ===
const BrandsMarquee = () => {
  // duplicate list so it loops seamlessly
  const list = [...BRANDS_LIST, ...BRANDS_LIST];
  return (
    <div className="fa-brands-marquee">
      <div className="fa-brands-marquee-track">
        {list.map((b, i) => (
          <div className="fa-brands-marquee-item" key={i}>
            <BrandImg brand={b} scale={0.85} />
          </div>
        ))}
      </div>
    </div>
  );
};

// === Layout: Carrusel paginado swipeable ===
const BrandsCarousel = () => {
  const [page, setPage] = React.useState(0);
  const trackRef = React.useRef(null);
  const pageSize = 4; // 2x2 per page
  const pages = [];
  for (let i = 0; i < BRANDS_LIST.length; i += pageSize) {
    pages.push(BRANDS_LIST.slice(i, i + pageSize));
  }
  const onScroll = () => {
    const t = trackRef.current;
    if (!t) return;
    const p = Math.round(t.scrollLeft / t.clientWidth);
    setPage(p);
  };
  const goto = (i) => {
    const t = trackRef.current;
    if (!t) return;
    t.scrollTo({ left: i * t.clientWidth, behavior: "smooth" });
  };
  return (
    <div className="fa-brands-carousel">
      <div className="fa-brands-carousel-track" ref={trackRef} onScroll={onScroll}>
        {pages.map((group, i) => (
          <div className="fa-brands-carousel-page" key={i}>
            {group.map((b) => (
              <div className="fa-brand-cell" key={b.name}>
                <BrandImg brand={b} scale={1.05} />
              </div>
            ))}
          </div>
        ))}
      </div>
      <div className="fa-brands-carousel-dots">
        {pages.map((_, i) => (
          <button
            key={i}
            className={`fa-brands-carousel-dot ${i === page ? "is-active" : ""}`}
            onClick={() => goto(i)}
            aria-label={`Página ${i + 1}`}
          />
        ))}
      </div>
    </div>
  );
};

// === Layout: Lista vertical apilada ===
const BrandsStack = () => (
  <div className="fa-brands-stack">
    {BRANDS_LIST.map((b, i) => (
      <div className="fa-brands-stack-row" key={b.name}>
        <BrandImg brand={b} scale={1.0} />
        <span className="fa-brands-stack-name">{b.name}</span>
      </div>
    ))}
  </div>
);

const Brands = ({ t, layout = "compact" }) => {
  let body;
  if (layout === "marquee") {
    body = <BrandsMarquee />;
  } else if (layout === "carousel") {
    body = <BrandsCarousel />;
  } else if (layout === "stack") {
    body = <BrandsStack />;
  } else {
    // compact = 4×2 desktop, 3-col mobile
    // big = 2-col mobile, larger cells
    const gridClass = layout === "big" ? "fa-brands-grid fa-brands-grid--big" : "fa-brands-grid";
    const scale = layout === "big" ? 1.15 : 1;
    body = (
      <div className={gridClass}>
        {BRANDS_LIST.map((b) => (
          <BrandCell key={b.name} brand={b} scale={scale} />
        ))}
      </div>
    );
  }
  return (
    <section className={`fa-brands fa-brands--${layout}`} id="brands">
      <div className="fa-container">
        <Reveal>
          <div className="fa-section-eyebrow">
            <span className="fa-mono">{t.brands.eyebrow}</span>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <h2 className="fa-section-title fa-clients-title">
            {t.brands.title.split("\n").map((l, i) => (
              <span key={i} style={{ display: "block" }}>{l}</span>
            ))}
          </h2>
        </Reveal>
        <Reveal delay={240}>
          {body}
        </Reveal>
      </div>
    </section>
  );
};

// ---------- AUDIENCE LAYOUTS ----------

const AudienceSplit = ({ t }) => (
  <div className="fa-audience-grid fa-aud--split">
    <div>
      <Reveal>
        <div className="fa-section-eyebrow"><span className="fa-mono">{t.audience.eyebrow}</span></div>
        <h2 className="fa-section-title">{t.audience.title}</h2>
      </Reveal>
      <Reveal delay={180}>
        <ol className="fa-audience-list">
          {t.audience.list.map((l, i) => <li key={i}>{l}</li>)}
        </ol>
      </Reveal>
    </div>
    <Reveal delay={250}>
      <div className="fa-outcome">
        <div className="fa-outcome-title">{t.audience.outcome.title}</div>
        <ul className="fa-outcome-items">
          {t.audience.outcome.items.map((i, idx) => <li key={idx}>{i}</li>)}
        </ul>
      </div>
    </Reveal>
  </div>
);

const AudienceManifesto = ({ t }) => (
  <div className="fa-aud--manifesto">
    <Reveal>
      <div className="fa-section-eyebrow fa-aud-eyebrow-center">
        <span className="fa-mono">{t.audience.eyebrow}</span>
      </div>
      <h2 className="fa-section-title fa-aud-title-center">{t.audience.title}</h2>
    </Reveal>
    <Reveal delay={150}>
      <div className="fa-aud-mani-rule" aria-hidden="true" />
    </Reveal>
    <Reveal delay={200}>
      <ul className="fa-aud-mani-list">
        {t.audience.list.map((l, i) => <li key={i}>{l}</li>)}
      </ul>
    </Reveal>
    <Reveal delay={300}>
      <div className="fa-aud-mani-outcome">
        <div className="fa-mono fa-aud-mani-outcome-label">{t.audience.outcome.title}</div>
        <div className="fa-aud-mani-outcome-items">
          {t.audience.outcome.items.map((i, idx) => (
            <span key={idx} className={`fa-aud-mani-pill ${idx % 2 === 1 ? "is-alt" : ""}`}>{i}</span>
          ))}
        </div>
      </div>
    </Reveal>
  </div>
);

const AudienceIndex = ({ t }) => (
  <div className="fa-aud--index">
    <div className="fa-aud-idx-head">
      <Reveal>
        <div className="fa-section-eyebrow"><span className="fa-mono">{t.audience.eyebrow}</span></div>
        <h2 className="fa-section-title">{t.audience.title}</h2>
      </Reveal>
    </div>
    <div className="fa-aud-idx-grid">
      {t.audience.list.map((l, i) => (
        <Reveal key={i} delay={120 + i * 60}>
          <div className="fa-aud-idx-item">
            <div className="fa-aud-idx-num">{String(i + 1).padStart(2, "0")}</div>
            <div className="fa-aud-idx-text">{l}</div>
          </div>
        </Reveal>
      ))}
    </div>
    <Reveal delay={350}>
      <div className="fa-aud-idx-outcome">
        <span className="fa-mono fa-aud-idx-outcome-label">{t.audience.outcome.title}</span>
        <span className="fa-aud-idx-outcome-rule" aria-hidden="true" />
        <span className="fa-aud-idx-outcome-items">
          {t.audience.outcome.items.map((i, idx) => (
            <em key={idx} className={idx % 2 === 1 ? "is-alt" : ""}>{i}</em>
          ))}
        </span>
      </div>
    </Reveal>
  </div>
);

const AudienceMatrix = ({ t }) => (
  <div className="fa-aud--matrix">
    <Reveal>
      <div className="fa-aud-mx-top">
        <div className="fa-section-eyebrow"><span className="fa-mono">{t.audience.eyebrow}</span></div>
        <h2 className="fa-section-title">{t.audience.title}</h2>
      </div>
    </Reveal>
    <div className="fa-aud-mx-grid">
      <div className="fa-aud-mx-col">
        <div className="fa-mono fa-aud-mx-col-label">{t.audience.eyebrow}</div>
        <ul className="fa-aud-mx-list">
          {t.audience.list.map((l, i) => (
            <Reveal key={i} delay={100 + i * 50}>
              <li>
                <span className="fa-aud-mx-marker" aria-hidden="true">+</span>
                <span>{l}</span>
              </li>
            </Reveal>
          ))}
        </ul>
      </div>
      <div className="fa-aud-mx-col fa-aud-mx-col--out">
        <div className="fa-mono fa-aud-mx-col-label">{t.audience.outcome.title}</div>
        <ul className="fa-aud-mx-list fa-aud-mx-list--out">
          {t.audience.outcome.items.map((i, idx) => (
            <Reveal key={idx} delay={120 + idx * 50}>
              <li className={idx % 2 === 1 ? "is-alt" : ""}>
                <span className="fa-aud-mx-marker" aria-hidden="true">→</span>
                <span>{i}</span>
              </li>
            </Reveal>
          ))}
        </ul>
      </div>
    </div>
  </div>
);

const AudienceRibbon = ({ t }) => (
  <div className="fa-aud--ribbon">
    <Reveal>
      <div className="fa-aud-rb-head">
        <div className="fa-section-eyebrow"><span className="fa-mono">{t.audience.eyebrow}</span></div>
        <h2 className="fa-section-title">{t.audience.title}</h2>
      </div>
    </Reveal>
    <Reveal delay={180}>
      <div className="fa-aud-rb-strip" role="list">
        {t.audience.list.map((l, i) => (
          <span key={i} className="fa-aud-rb-chip" role="listitem">{l}</span>
        ))}
      </div>
    </Reveal>
    <Reveal delay={280}>
      <div className="fa-aud-rb-outcome">
        <div className="fa-aud-rb-outcome-head">
          <span className="fa-mono">{t.audience.outcome.title}</span>
        </div>
        <div className="fa-aud-rb-outcome-items">
          {t.audience.outcome.items.map((i, idx) => (
            <div key={idx} className={`fa-aud-rb-outcome-item ${idx % 2 === 1 ? "is-alt" : ""}`}>
              {i}
            </div>
          ))}
        </div>
      </div>
    </Reveal>
  </div>
);

const AudienceLedger = ({ t }) => (
  <div className="fa-aud--ledger">
    <Reveal>
      <div className="fa-aud-lg-head">
        <div className="fa-section-eyebrow"><span className="fa-mono">{t.audience.eyebrow}</span></div>
        <h2 className="fa-section-title">{t.audience.title}</h2>
      </div>
    </Reveal>
    <Reveal delay={180}>
      <table className="fa-aud-lg-table">
        <thead>
          <tr>
            <th className="fa-mono">№</th>
            <th className="fa-mono">{t.audience.eyebrow}</th>
            <th className="fa-mono fa-aud-lg-th-out">{t.audience.outcome.title}</th>
          </tr>
        </thead>
        <tbody>
          {t.audience.list.map((l, i) => {
            const out = t.audience.outcome.items[i];
            return (
              <tr key={i}>
                <td className="fa-aud-lg-num">{String(i + 1).padStart(2, "0")}</td>
                <td className="fa-aud-lg-who">{l}</td>
                <td className={`fa-aud-lg-out ${out && i % 2 === 1 ? "is-alt" : ""}`}>{out || ""}</td>
              </tr>
            );
          })}
          {t.audience.outcome.items.length > t.audience.list.length &&
            t.audience.outcome.items.slice(t.audience.list.length).map((o, idx) => (
              <tr key={`extra-${idx}`}>
                <td className="fa-aud-lg-num">—</td>
                <td className="fa-aud-lg-who"></td>
                <td className={`fa-aud-lg-out ${(idx + t.audience.list.length) % 2 === 1 ? "is-alt" : ""}`}>{o}</td>
              </tr>
            ))}
        </tbody>
      </table>
    </Reveal>
  </div>
);

const Audience = ({ t, layout = "split" }) => {
  const variants = {
    split: AudienceSplit,
    manifesto: AudienceManifesto,
    index: AudienceIndex,
    matrix: AudienceMatrix,
    ribbon: AudienceRibbon,
    ledger: AudienceLedger,
  };
  const View = variants[layout] || AudienceSplit;
  return (
    <section className={`fa-audience fa-audience--${layout}`} id="audience">
      <div className="fa-container">
        <View t={t} />
      </div>
    </section>
  );
};

const Contact = ({ t }) => {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: "", email: "", company: "", service: "" });
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => {
      setForm({ name: "", email: "", company: "", service: "" });
      setSent(false);
    }, 4500);
  };
  return (
    <section className="fa-contact" id="contact">
      <div className="fa-container">
        <div className="fa-contact-grid">
          <div>
            <Reveal>
              <div className="fa-section-eyebrow">
                <span className="fa-mono">{t.contact.eyebrow}</span>
              </div>
              <h2 className="fa-section-title">
                {t.contact.title.split("\n").map((line, i) => (
                  <span key={i} style={{ display: "block", fontStyle: "normal", color: i === 1 ? "var(--fa-gold)" : "inherit" }}>
                    {line}
                  </span>
                ))}
              </h2>
            </Reveal>
            {t.contact.lede ? (
              <Reveal delay={180}>
                <p className="fa-contact-lede">{t.contact.lede}</p>
              </Reveal>
            ) : null}
          </div>
          <Reveal delay={250}>
            <form className="fa-form" onSubmit={submit}>
              <div className="fa-field">
                <label>{t.contact.placeholder.name}</label>
                <input type="text" required value={form.name}
                  onChange={(e) => setForm({ ...form, name: e.target.value })}
                  placeholder="—" />
              </div>
              <div className="fa-field">
                <label>{t.contact.placeholder.email}</label>
                <input type="email" required value={form.email}
                  onChange={(e) => setForm({ ...form, email: e.target.value })}
                  placeholder="—" />
              </div>
              <div className="fa-field">
                <label>{t.contact.placeholder.company}</label>
                <input type="text" value={form.company}
                  onChange={(e) => setForm({ ...form, company: e.target.value })}
                  placeholder="—" />
              </div>
              <div className="fa-field fa-field-service">
                <label>{t.contact.placeholder.service}</label>
                <div className="fa-svc-select-wrap">
                  <select
                    className="fa-svc-select"
                    required
                    value={form.service}
                    onChange={(e) => setForm({ ...form, service: e.target.value })}
                  >
                    <option value="" disabled>—</option>
                    {t.services.items.map((s, i) => (
                      <option key={s.title} value={s.title}>
                        {s.number} · {s.title}
                      </option>
                    ))}
                  </select>
                  <span className="fa-svc-select-caret" aria-hidden="true">⌄</span>
                </div>
              </div>
              <button type="submit" className="fa-cta fa-form-submit">
                {t.contact.send}
                <span className="fa-cta-arrow">→</span>
              </button>
              {sent && <div className="fa-form-sent">✦ {t.contact.sent}</div>}
            </form>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

// ---------- FOOTER LAYOUTS ----------

const FooterDefault = ({ t }) => (
  <div className="fa-container fa-footer-inner">
    <div className="fa-footer-mark">
      <img src="assets/logo-horizontal.png" alt="Fuente Alquimia" className="fa-footer-logo" />
    </div>
    <p className="fa-footer-tag">{t.footer.tagline}</p>
    <div className="fa-footer-rights">{t.footer.rights}</div>
  </div>
);

// 2 · MONUMENTAL — wordmark a sangre, mínimo info abajo
const FooterMonumental = ({ t }) => (
  <div className="fa-footer-mn">
    <div className="fa-container">
      <div className="fa-footer-mn-meta">
        <span className="fa-mono">{t.footer.tagline}</span>
        <span className="fa-footer-mn-sep" />
        <span className="fa-mono">{t.footer.rights}</span>
      </div>
    </div>
    <div className="fa-footer-mn-word" aria-hidden="true">
      FUENTE<span className="fa-footer-mn-amp">·</span>ALQUIMIA
    </div>
  </div>
);

// 3 · CTA — última invitación a conversar
const FooterCta = ({ t }) => (
  <div className="fa-footer-cta">
    <div className="fa-container">
      <div className="fa-footer-cta-block">
        <div className="fa-footer-cta-eyebrow fa-mono">{t.contact.eyebrow}</div>
        <h2 className="fa-footer-cta-title">
          {t.contact.title.split("\n").map((line, i) => (
            <span key={i} style={{ display: "block", color: i === 1 ? "var(--fa-gold)" : "inherit" }}>
              {line}
            </span>
          ))}
        </h2>
        <a href="#contact" className="fa-footer-cta-btn">
          <span>{t.contact.cta}</span>
          <span aria-hidden="true">→</span>
        </a>
      </div>
      <div className="fa-footer-cta-foot">
        <img src="assets/logo-horizontal.png" alt="Fuente Alquimia" className="fa-footer-cta-logo" />
        <span className="fa-mono">{t.footer.rights}</span>
      </div>
    </div>
  </div>
);

// 4 · COLOFÓN — sigilo + frase + rights, como libro antiguo
const FooterColophon = ({ t }) => (
  <div className="fa-footer-co">
    <div className="fa-container">
      <div className="fa-footer-co-sigil" aria-hidden="true">
        <svg viewBox="0 0 80 80" width="80" height="80">
          <circle cx="40" cy="40" r="36" fill="none" stroke="currentColor" strokeWidth="1" />
          <circle cx="40" cy="40" r="22" fill="none" stroke="currentColor" strokeWidth="1" />
          <circle cx="40" cy="40" r="3" fill="currentColor" />
          <line x1="40" y1="4" x2="40" y2="76" stroke="currentColor" strokeWidth="0.5" opacity="0.5" />
          <line x1="4" y1="40" x2="76" y2="40" stroke="currentColor" strokeWidth="0.5" opacity="0.5" />
        </svg>
      </div>
      <p className="fa-footer-co-tag">{t.footer.tagline}</p>
      <div className="fa-footer-co-rule" aria-hidden="true" />
      <div className="fa-footer-co-rights fa-mono">{t.footer.rights}</div>
    </div>
  </div>
);

// 5 · FUNCIONAL — 3 columnas equilibradas con iconos sociales
const FooterFunctional = ({ t }) => {
  const navLinks = [
    { id: "services", label: t.nav.services },
    { id: "brands", label: t.nav.work },
    { id: "contact", label: t.nav.contact },
  ];
  return (
    <div className="fa-footer-fn">
      <div className="fa-container">
        <div className="fa-footer-fn-grid">
          {/* Col 1 — marca */}
          <div className="fa-footer-fn-col fa-footer-fn-col-brand">
            <img src="assets/logo-footer.png" alt="Fuente Alquimia" className="fa-footer-fn-logo" />
            {t.footer.tagline ? <p className="fa-footer-fn-tag">{t.footer.tagline}</p> : null}
          </div>

          {/* Col 2 — navegación */}
          <div className="fa-footer-fn-col">
            <div className="fa-footer-fn-label fa-mono">{t.footer.navLabel || "Navegación"}</div>
            <ul className="fa-footer-fn-list">
              {navLinks.map((l) => (
                <li key={l.id}>
                  <a href={"#" + l.id}>{l.label}</a>
                </li>
              ))}
            </ul>
          </div>

          {/* Col 3 — contacto + redes */}
          <div className="fa-footer-fn-col">
            <div className="fa-footer-fn-label fa-mono">{t.footer.contactLabel || "Contacto"}</div>
            <ul className="fa-footer-fn-list">
              <li><a href="mailto:contacto@fuentealquimia.com">contacto@fuentealquimia.com</a></li>
            </ul>
            <div className="fa-footer-fn-social" aria-label="Redes sociales">
              <a href="https://www.instagram.com/fuente_alquimia/" target="_blank" rel="noopener" aria-label="Instagram">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.81.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.81-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.81-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.81.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.34 4.14.63c-.79.3-1.46.71-2.13 1.38C1.34 2.68.93 3.35.63 4.14.34 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.27 2.15.56 2.91.3.79.71 1.46 1.38 2.13.67.67 1.34 1.08 2.13 1.38.76.29 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.27 2.91-.56.79-.3 1.46-.71 2.13-1.38.67-.67 1.08-1.34 1.38-2.13.29-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.27-2.15-.56-2.91-.3-.79-.71-1.46-1.38-2.13C21.32 1.34 20.65.93 19.86.63c-.76-.29-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1 0 12 18.16 6.16 6.16 0 0 0 12 5.84zm0 10.16A4 4 0 1 1 12 8a4 4 0 0 1 0 8zm6.41-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z"/>
                </svg>
              </a>
              <a href="https://www.facebook.com/profile.php?id=61588892147468" target="_blank" rel="noopener" aria-label="Facebook">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M22 12.07C22 6.51 17.52 2 12 2S2 6.51 2 12.07c0 4.99 3.66 9.13 8.44 9.88v-6.99H7.9v-2.89h2.54V9.85c0-2.51 1.49-3.89 3.77-3.89 1.09 0 2.24.19 2.24.19v2.47h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.45 2.89h-2.33V22c4.78-.75 8.44-4.89 8.44-9.93z" />
                </svg>
              </a>
            </div>
          </div>
        </div>

        <div className="fa-footer-fn-bar">
          <span className="fa-mono fa-footer-fn-bar-rights">{t.footer.rights}</span>
        </div>
      </div>
    </div>
  );
};

// 6 · GRID3 — 3 columnas: marca + navegación + redes (inspiración tiles)
const FooterGrid3 = ({ t }) => {
  const go = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const navH = (document.querySelector(".fa-nav")?.offsetHeight || 80) + 8;
      window.scrollTo({ top: el.offsetTop - navH, behavior: "smooth" });
    }
  };
  return (
    <div className="fa-footer-g3">
      <div className="fa-container">
        <div className="fa-footer-g3-grid">
          <div className="fa-footer-g3-col fa-footer-g3-col--brand">
            <img src="assets/logo-footer.png" alt="Fuente Alquimia" className="fa-footer-g3-logo" />
            <p className="fa-footer-g3-tag">Claridad para decisiones que pesan. Estrategia, marca e IA aplicada.</p>
          </div>

          <div className="fa-footer-g3-col">
            <h4 className="fa-footer-g3-h">Navegación</h4>
            <ul className="fa-footer-g3-list">
              <li><a onClick={() => go("services")}>Servicios</a></li>
              <li><a onClick={() => go("brands")}>Trabajos</a></li>
              <li><a onClick={() => go("contact")}>Contacto</a></li>
            </ul>
          </div>

          <div className="fa-footer-g3-col">
            <h4 className="fa-footer-g3-h">Síguenos</h4>
            <div className="fa-footer-g3-social" aria-label="Redes sociales">
              <a href="https://www.instagram.com/fuente_alquimia/" target="_blank" rel="noopener" aria-label="Instagram">
                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z" />
                </svg>
              </a>
              <a href="https://www.facebook.com/profile.php?id=61588892147468" target="_blank" rel="noopener" aria-label="Facebook">
                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                </svg>
              </a>
            </div>
            <a className="fa-footer-g3-mail" href="mailto:contacto@fuentealquimia.com">contacto@fuentealquimia.com</a>
          </div>
        </div>

        <div className="fa-footer-g3-bar">
          <span>{t.footer.rights}</span>
        </div>
      </div>
    </div>
  );
};

const Footer = ({ t, layout = "default" }) => {
  const variants = {
    default: FooterDefault,
    monumental: FooterMonumental,
    cta: FooterCta,
    colophon: FooterColophon,
    functional: FooterFunctional,
    grid3: FooterGrid3,
  };
  const View = variants[layout] || FooterDefault;
  return (
    <footer className={`fa-footer fa-footer--${layout}`}>
      <View t={t} />
    </footer>
  );
};

Object.assign(window, { Nav, Hero, Manifesto, Services, Method, Clients, Brands, Audience, Contact, Footer });