/* =========================================================
   Sections — Fran Ruiz portfolio
   Pulls from window.T (i18n) + window.PROJECTS + window.CLIENTS
   ========================================================= */

const { useEffect, useRef, useState } = React;

// Detect if we're on a subpage and need to prefix anchor links with the home file
const HOME = typeof location !== "undefined" && /(project|contact)\.html/i.test(location.pathname) ? "index.html" : "";

/* ---------- TOP NAV ---------- */
const CountUp = ({ value }) => {
  // value can be "50+", "8 yrs", "100%", "8 J.", etc — extract the integer prefix
  const m = String(value).match(/^(\d+)(.*)$/);
  if (!m) return <em>{value}</em>;
  const target = parseInt(m[1], 10);
  const suffix = m[2] || "";
  const ref = useRef(null);
  const [n, setN] = useState(0);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let raf, start;
    const dur = 1400;
    const animate = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setN(Math.round(eased * target));
      if (p < 1) raf = requestAnimationFrame(animate);
    };
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          raf = requestAnimationFrame(animate);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.3 });
    io.observe(el);
    return () => {io.disconnect();cancelAnimationFrame(raf);};
  }, [target]);

  return <em ref={ref}>{n}{suffix}</em>;
};

const Nav = ({ lang, setLang, theme, toggleTheme, t }) => {
  const [open, setOpen] = useState(false);
  const [drawer, setDrawer] = useState(false);
  const menuRef = useRef(null);

  useEffect(() => {
    const close = (e) => {if (menuRef.current && !menuRef.current.contains(e.target)) setOpen(false);};
    document.addEventListener("click", close);
    return () => document.removeEventListener("click", close);
  }, []);

  // Lock body scroll when drawer open
  useEffect(() => {
    document.body.style.overflow = drawer ? "hidden" : "";
    return () => {document.body.style.overflow = "";};
  }, [drawer]);

  // Close drawer on resize to desktop
  useEffect(() => {
    const onR = () => {if (window.innerWidth > 900) setDrawer(false);};
    window.addEventListener("resize", onR);
    return () => window.removeEventListener("resize", onR);
  }, []);

  const langs = [
  { id: "en", flag: "🇬🇧", name: "English" },
  { id: "de", flag: "🇨🇭", name: "Deutsch" },
  { id: "es", flag: "🇪🇸", name: "Español" }];

  const current = langs.find((l) => l.id === lang);

  const navLinks = [
  { href: HOME + "#work", label: t.nav.work },
  { href: HOME + "#about", label: t.nav.about },
  { href: HOME + "#services", label: t.nav.services },
  { href: HOME + "#pricing", label: t.nav.pricing },
  { href: "contact.html", label: t.nav.contact }];


  return (
    <>
      <nav className="nav">
        <a className="nav-logo" href={HOME || "#top"}>
          <span className="mark">FR</span>
          Fran Ruiz
        </a>
        <div className="nav-links">
          {navLinks.map((l) => <a key={l.href} href={l.href}>{l.label}</a>)}
        </div>
        <div className="nav-right">
          <button className="theme-pill" onClick={toggleTheme} title="Toggle theme">
            {theme === "dark" ? "☼" : "☾"}
            <span className="hide-sm">{theme === "dark" ? "Light" : "Dark"}</span>
          </button>
          <div className={`lang-menu hide-sm-flex ${open ? "open" : ""}`} ref={menuRef}>
            <button className="lang-pill" onClick={(e) => {e.stopPropagation();setOpen(!open);}}>
              <span className="flag">{current.flag}</span>
              <span>{current.id.toUpperCase()}</span>
              <span>▾</span>
            </button>
            <div className="lang-dropdown">
              {langs.map((l) =>
              <button key={l.id} className={l.id === lang ? "active" : ""}
              onClick={() => {setLang(l.id);setOpen(false);}}>
                  <span className="flag">{l.flag}</span>{l.name}
                </button>
              )}
            </div>
          </div>
          <a className="nav-cta hide-sm" href="contact.html">
            {t.nav.cta}
            <span className="arr">↗</span>
          </a>
          <button className="nav-burger" onClick={() => setDrawer(true)} aria-label="Open menu">
            <span /><span /><span />
          </button>
        </div>
      </nav>

      {/* Mobile drawer */}
      <div className={`drawer-overlay ${drawer ? "open" : ""}`} onClick={() => setDrawer(false)} />
      <aside className={`drawer ${drawer ? "open" : ""}`} role="dialog" aria-modal="true">
        <div className="drawer-head">
          <a className="nav-logo" href={HOME || "#top"} onClick={() => setDrawer(false)}>
            <span className="mark">FR</span>
            Fran Ruiz
          </a>
          <button className="drawer-close" onClick={() => setDrawer(false)} aria-label="Close menu">✕</button>
        </div>

        <div className="drawer-links">
          {navLinks.map((l, i) =>
          <a key={l.href} href={l.href} onClick={() => setDrawer(false)} style={{ animationDelay: `${i * 60}ms` }}>
              <span className="drawer-num">/ {String(i + 1).padStart(2, "0")}</span>
              <span className="drawer-label">{l.label}</span>
              <span className="drawer-arrow">→</span>
            </a>
          )}
        </div>

        <div className="drawer-foot">
          <div className="drawer-section-label">{t.nav.cta.toUpperCase ? t.nav.cta : "Language"}</div>
          <div className="drawer-lang">
            {langs.map((l) =>
            <button key={l.id} className={l.id === lang ? "active" : ""}
            onClick={() => setLang(l.id)}>
                <span className="flag">{l.flag}</span>{l.id.toUpperCase()}
              </button>
            )}
          </div>

          <a className="drawer-cta" href="contact.html" onClick={() => setDrawer(false)}>
            {t.nav.cta}
            <span className="arr">↗</span>
          </a>

          <div className="drawer-contact">
            <a href="mailto:contacto@franruiz.es">contacto@franruiz.es</a>
            <a href="tel:+41767312517">+41 076 73 125 17</a>
            <a href="https://wa.me/34666401757" target="_blank" rel="noreferrer">WhatsApp →</a>
          </div>
        </div>
      </aside>
    </>);

};

/* ---------- HERO ---------- */
const Hero = ({ t }) =>
<header className="hero wrap" id="top">
    <div className="hero-shape s1" />
    <div className="hero-shape s2" />
    <div className="hero-shape s3" />

    <div className="hero-availability reveal in">
      <span className="led" />
      {t.hero.avail}
    </div>

    <h1 className="reveal in">
      {t.hero.titleA} <span className="ink">{t.hero.titleB}</span><br />
      {t.hero.titleC} <span className="underline">{t.hero.titleD}</span>
    </h1>

    <p className="hero-sub reveal" data-d="200">{t.hero.sub}</p>

    <div className="hero-actions reveal" data-d="300">
      <a className="btn btn-primary" href="#contact">
        {t.hero.primary}<span className="arr">→</span>
      </a>
      <a className="btn btn-ghost" href="#work">
        {t.hero.secondary}<span className="arr">→</span>
      </a>
    </div>

    <div className="hero-meta">
      <div className="stat reveal" data-d="100">
        <div className="num"><CountUp value={t.hero.stat1.num} /></div>
        <div className="lbl">{t.hero.stat1.lbl}</div>
      </div>
      <div className="stat reveal" data-d="200">
        <div className="num"><CountUp value={t.hero.stat2.num} /></div>
        <div className="lbl">{t.hero.stat2.lbl}</div>
      </div>
      <div className="stat reveal" data-d="300">
        <div className="num"><CountUp value={t.hero.stat3.num} /></div>
        <div className="lbl">{t.hero.stat3.lbl}</div>
      </div>
    </div>
  </header>;


/* ---------- MARQUEE ---------- */
const Marquee = ({ t }) => {
  const row =
  <div className="marquee-track">
      {t.marquee.concat(t.marquee).map((it, i) =>
    <span key={i}>{it}<span className="dot" /></span>
    )}
    </div>;

  return <div className="marquee">{row}</div>;
};

/* ---------- ABOUT ---------- */
const About = ({ t }) =>
<section className="section wrap" id="about" style={{ padding: "119.5px 24px" }}>
    <div className="eyebrow reveal" style={{ margin: "0px 0px 28px" }}>{t.about.eyebrow}</div>
    <div className="about-grid" style={{ margin: "0px" }}>
      <div className="about-photo reveal">
        <img src="assets/fran-portrait.png" alt="Fran Ruiz at his desk" style={{ objectFit: "cover", padding: "0px", margin: "0px" }} />
        <div className="badge">
          <span className="moto">🏍</span>
          {t.about.badge}
        </div>
      </div>
      <div className="about-copy">
        <h2 className="reveal">{t.about.title}</h2>
        <p className="reveal" data-d="100">{t.about.p1}</p>
        <p className="reveal" data-d="200">{t.about.p2}</p>
        <p className="reveal" data-d="300">{t.about.p3}</p>
        <p className="reveal" data-d="400"><strong>{t.about.p4}</strong></p>
        <div className="about-cards">
          <div className="card reveal" data-d="200">
            <div className="ico">📍</div>
            <h4>{t.about.cardA.t}</h4>
            <p>{t.about.cardA.s}</p>
          </div>
          <div className="card reveal" data-d="300">
            <div className="ico">✦</div>
            <h4>{t.about.cardB.t}</h4>
            <p>{t.about.cardB.s}</p>
          </div>
        </div>
      </div>
    </div>
  </section>;


/* ---------- WORK — featured projects (Kurawa-style) ---------- */
const FeaturedCard = ({ p, i, t, lang }) => {
  const ref = useRef(null);

  const evenRight = i % 2 === 1; // alternate reveal direction

  return (
    <a
      ref={ref}
      className={`feat-card reveal-stagger ${evenRight ? "from-right" : "from-left"}`}
      href={`project.html?slug=${p.slug}`}
      style={{ "--card-bg": p.bg, "--card-fg": p.fg }}>
      
      <div className="feat-meta-top">
        <span className="feat-num">/ {String(i + 1).padStart(2, "0")}</span>
        <span className="feat-year">{p.year}</span>
      </div>

      <div className="feat-canvas">
        {/* Empty canvas — replace src on i18n.jsx FEATURED[].img to add real image */}
        {p.img &&
        <img src={p.img} alt={p.title[lang]} loading="lazy" />
        }
        {!p.img &&
        <div className="canvas-empty">
            <span className="canvas-cross">+</span>
            <span className="canvas-label">{p.title[lang]}</span>
            <span className="canvas-hint">Drop image here</span>
          </div>
        }
        <div className="feat-canvas-overlay">
          <div className="feat-hover">
            <span>{t.work.view}</span>
            <span className="arr">↗</span>
          </div>
        </div>
      </div>

      <div className="feat-foot">
        <div className="feat-foot-left">
          <h3 className="feat-title">{p.title[lang]}</h3>
          <div className="feat-tags">
            {p.tags[lang].map((tag) => <span key={tag}>{tag}</span>)}
          </div>
        </div>
        <div className="feat-arrow"><span>↗</span></div>
      </div>
    </a>);

};

const CTAFeaturedCard = ({ t }) =>
<a className="feat-card feat-card-cta reveal-stagger from-right" href="#contact">
    <div className="feat-meta-top">
      <span className="feat-num">/ 04</span>
      <span className="feat-year">{t.work.ctaEyebrow}</span>
    </div>

    <div className="feat-canvas feat-canvas-cta">
      <div className="cta-pattern" aria-hidden="true">
        <span /><span /><span /><span /><span /><span />
      </div>
      <div className="cta-content">
        <span className="cta-eyebrow">— {t.work.ctaEyebrow}</span>
        <h3 className="cta-big">{t.work.ctaTitle}</h3>
        <div className="cta-circle">
          <span>↗</span>
        </div>
      </div>
    </div>

    <div className="feat-foot">
      <div className="feat-foot-left">
        <h3 className="feat-title">{t.work.ctaBtn}</h3>
        <div className="feat-tags">
          <span style={{ padding: "5px 0px" }}>contacto@franruiz.es</span>
        </div>
      </div>
      <div className="feat-arrow"><span>↗</span></div>
    </div>
  </a>;


const Work = ({ t, lang }) =>
<section className="section wrap" id="work" style={{ padding: "100px 24px" }}>
    <div className="eyebrow reveal" style={{ margin: "0px 0px 28px" }}>{t.work.eyebrow}</div>
    <div className="work-head">
      <h2 className="reveal" style={{ margin: "0px" }}>
        {t.work.title.includes(",") ?
      <>{t.work.title.split(",")[0]},<br /><span className="ink">{t.work.title.split(",")[1]}</span></> :
      t.work.title}
      </h2>
    </div>

    <div className="featured-grid">
      {FEATURED.map((p, i) => <FeaturedCard key={p.id} p={p} i={i} t={t} lang={lang} />)}
      <CTAFeaturedCard t={t} />
    </div>
  </section>;



/* ---------- SERVICES ---------- */
const Services = ({ t }) => {
  const svcBgs = ["#e8624a", "#a3b59a", "#f4b65c", "#5fa7d4", "#c97a64", "#1a1a1a"];
  return (
    <section className="section wrap" id="services" style={{ padding: "100px 24px" }}>
      <div className="eyebrow reveal">{t.services.eyebrow}</div>
      <div className="services-head">
        <h2 className="reveal" style={{ margin: "0px", width: "700px" }}>{t.services.title.split(",").map((part, i) =>
          <React.Fragment key={i}>
            {i > 0 && <>,<br /></>}
            {i === 1 ? <span className="ink">{part.trim()}</span> : part}
          </React.Fragment>
          )}</h2>
      </div>
      <div className="services-grid" style={{ margin: "0px" }}>
        {t.services.items.map((s, i) =>
        <div className="svc-card reveal" key={s.t} data-d={(i % 3 * 100).toString()}
        style={{ "--svc-bg": svcBgs[i % svcBgs.length] }}>
            <div className="num">/ {String(i + 1).padStart(2, "0")}</div>
            <div className="ico">{s.icon}</div>
            <h3>{s.t}</h3>
            <p>{s.d}</p>
          </div>
        )}
      </div>
    </section>);

};

/* ---------- TECH ---------- */
const Tech = ({ t }) =>
<section className="section wrap" style={{ padding: "119.5px 24px" }}>
    <div className="tech-head">
      <h2 className="reveal">{t.tech.title}</h2>
      <p className="reveal" data-d="100">{t.tech.sub}</p>
    </div>
    <div className="tech-grid">
      {t.tech.items.map((it, i) =>
    <div className="tech-pill reveal" key={it.n} data-d={(i % 6 * 80).toString()}>
          <div className="ico">{it.i}</div>
          <div className="name">{it.n}</div>
        </div>
    )}
    </div>
  </section>;


/* ---------- PRICING ---------- */
const PriceCard = ({ p, i, hoveredIndex, setHoveredIndex }) => {
  const cardRef = useRef(null);

  // 3D tilt — track cursor offset from the card centre and map to a
  // rotation. We write transform directly so React state changes don't
  // throttle the move loop (60fps stays smooth on touch devices that
  // emit pointermove). No scale change — the card stays the same size
  // and only rotates; the dim of the *other* cards is what makes it
  // stand out, not growth. Also drives the glare radial gradient via
  // --mx/my.
  const onMove = (e) => {
    const el = cardRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const x = e.clientX - r.left - r.width / 2;
    const y = e.clientY - r.top - r.height / 2;
    const rotY = (x / r.width) * 8;     // -4deg .. +4deg
    const rotX = -(y / r.height) * 8;
    el.style.transform =
      `perspective(800px) rotateX(${rotX}deg) rotateY(${rotY}deg)`;
    el.style.setProperty("--mx", `${((e.clientX - r.left) / r.width) * 100}%`);
    el.style.setProperty("--my", `${((e.clientY - r.top) / r.height) * 100}%`);
  };
  const onLeave = () => {
    const el = cardRef.current;
    if (!el) return;
    el.style.transform =
      "perspective(800px) rotateX(0deg) rotateY(0deg)";
    setHoveredIndex(null);
  };

  // The centre card (index 1, Business) is always the visually featured
  // tier regardless of locale. i18n only flags `featured: true` in the
  // EN block, so we drive the class from index here instead.
  const isFeatured = i === 1 || p.featured;
  const isDimmed = hoveredIndex !== null && hoveredIndex !== i;

  return (
    <div
      ref={cardRef}
      className={
        // Note: no `.reveal` class here. The slide-up entry animation has
        // `fill-mode: both` and CSS animations override `el.style.transform`
        // in the cascade — so leaving it on the price cards kills the 3D
        // tilt AND re-fires every time `is-dimmed` toggles off. We let the
        // cards mount visible from the get-go; the section heading above
        // still has its own reveal animation.
        `price-card price-card-3d` +
        (isFeatured ? " featured" : "") +
        (isDimmed ? " is-dimmed" : "")
      }
      data-d={(i * 100).toString()}
      onMouseEnter={() => setHoveredIndex(i)}
      onMouseMove={onMove}
      onMouseLeave={onLeave}>

      <div className="price-card-inner">
        <div className="price-card-glare" />
        <div className="tier">{p.tier}</div>
        <h3>{p.name}</h3>
        <div className="price-tag">{p.price} <em>{p.per}</em></div>
        <p className="desc">{p.desc}</p>
        <ul>{p.features.map((f) => <li key={f}>{f}</li>)}</ul>
        <a className="pc-btn" href="#contact">{p.cta} →</a>
      </div>
    </div>);

};

const Pricing = ({ t }) => {
  const [hoveredIndex, setHoveredIndex] = useState(null);
  return (
    <section className="section wrap" id="pricing" style={{ padding: "100px 24px" }}>
      <div className="pricing-head">
        <div className="eyebrow reveal" style={{ justifyContent: "center" }}>{t.pricing.eyebrow}</div>
        <h2 className="reveal">{t.pricing.title.split(",").map((p, i) =>
          <React.Fragment key={i}>{i > 0 && <>,<br /><span className="ink">{p.trim()}</span></>}{i === 0 && p}</React.Fragment>
        )}</h2>
        <p className="reveal" data-d="200">{t.pricing.sub}</p>
      </div>
      <div className="pricing-grid" onMouseLeave={() => setHoveredIndex(null)}>
        {t.pricing.plans.map((p, i) =>
          <PriceCard
            key={p.name}
            p={p}
            i={i}
            hoveredIndex={hoveredIndex}
            setHoveredIndex={setHoveredIndex}
          />
        )}
      </div>
    </section>
  );
};


/* ---------- TESTIMONIALS ---------- */
const Testimonials = ({ t }) => {
  const [current, setCurrent] = React.useState(0);
  const [dragging, setDragging] = React.useState(false);
  const [startX, setStartX] = React.useState(0);
  const [dragDelta, setDragDelta] = React.useState(0);
  const trackRef = React.useRef(null);
  const items = t.tests.items;
  const total = items.length;

  const goTo = (idx) => {
    setCurrent(Math.max(0, Math.min(idx, total - 1)));
    setDragDelta(0);
  };

  const onPointerDown = (e) => {
    setDragging(true);
    setStartX(e.clientX ?? e.touches?.[0]?.clientX ?? 0);
    setDragDelta(0);
  };
  const onPointerMove = (e) => {
    if (!dragging) return;
    const x = e.clientX ?? e.touches?.[0]?.clientX ?? startX;
    setDragDelta(x - startX);
  };
  const onPointerUp = () => {
    if (!dragging) return;
    setDragging(false);
    if (dragDelta < -50) goTo(current + 1);
    else if (dragDelta > 50) goTo(current - 1);
    else setDragDelta(0);
  };

  return (
    <section className="section tests-section" style={{ padding: "119.5px 0" }}>
      <div className="wrap" style={{ padding: "0 24px" }}>
        <div className="tests-head">
          <div className="eyebrow reveal" style={{ justifyContent: "center" }}>{t.tests.eyebrow}</div>
          <h2 className="reveal">{t.tests.title}</h2>
        </div>
      </div>

      {/* Desktop grid — unchanged */}
      <div className="wrap" style={{ padding: "0 24px" }}>
        <div className="tests-grid tests-grid--desktop">
          {items.map((tt, i) =>
            <div className="test-card reveal" key={i} data-d={(i * 100).toString()}>
              <div className="stars">★★★★★</div>
              <blockquote>"{tt.q}"</blockquote>
              <div className="who">
                <div className="av">{tt.name.split(" ").map((s) => s[0]).slice(0, 2).join("")}</div>
                <div>
                  <div className="name">{tt.name}</div>
                  <div className="role">{tt.role}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Mobile carousel */}
      <div className="tests-carousel-wrap">
        <div
          className="tests-carousel-track"
          ref={trackRef}
          onMouseDown={onPointerDown}
          onMouseMove={onPointerMove}
          onMouseUp={onPointerUp}
          onMouseLeave={onPointerUp}
          onTouchStart={(e) => onPointerDown(e.touches[0])}
          onTouchMove={(e) => onPointerMove(e.touches[0])}
          onTouchEnd={onPointerUp}
          style={{
            transform: `translateX(calc(${-current * 100}% + ${dragDelta}px))`,
            transition: dragging ? "none" : "transform 0.45s cubic-bezier(0.25,1,0.5,1)",
          }}
        >
          {items.map((tt, i) =>
            <div className="tests-carousel-slide" key={i}>
              <div className="test-card">
                <div className="stars">★★★★★ <span className="stars-num">5</span></div>
                <blockquote>"{tt.q}"</blockquote>
                <div className="who">
                  <div className="av">{tt.name.split(" ").map((s) => s[0]).slice(0, 2).join("")}</div>
                  <div>
                    <div className="name">{tt.name}</div>
                    <div className="role">{tt.role}</div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
        {/* Fade edges */}
        <div className="tests-fade tests-fade--left" />
        <div className="tests-fade tests-fade--right" />
      </div>

      {/* Dots */}
      <div className="tests-dots">
        {items.map((_, i) =>
          <button
            key={i}
            className={"tests-dot" + (i === current ? " tests-dot--active" : "")}
            onClick={() => goTo(i)}
            aria-label={`Testimonio ${i + 1}`}
          />
        )}
      </div>
    </section>
  );
};


/* ---------- CLIENTS / TRUSTED BY ----------
   Names only — same black color, identity comes from
   typography choice per brand. No marks, no subs, no decorations. */
const BRANDS = [
  { id: "fimed",         name: "Clínica Fimed",       style: { fontFamily: "'Hanken Grotesk', sans-serif", fontWeight: 300, letterSpacing: "0.22em", textTransform: "lowercase", fontSize: "20px" } },
  { id: "garden",        name: "Garden Brasas",       style: { fontFamily: "Georgia, 'Times New Roman', serif", fontStyle: "italic", fontWeight: 700, fontSize: "24px", letterSpacing: "-0.01em" } },
  { id: "brilla",        name: "Brilla Influencers",  style: { fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 800, letterSpacing: "0.16em", fontSize: "18px" } },
  { id: "evaporalia",    name: "Evaporalia",          style: { fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 600, fontSize: "23px", letterSpacing: "-0.01em" } },
  { id: "hicool",        name: "HiCool",              style: { fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 800, fontSize: "24px", letterSpacing: "-0.04em" } },

  { id: "lfans",         name: "LFans",               style: { fontFamily: "Georgia, serif", fontWeight: 400, fontSize: "24px", letterSpacing: "0.1em" } },
  { id: "mediterranean", name: "Mediterranean",       style: { fontFamily: "Georgia, 'Times New Roman', serif", fontStyle: "italic", fontWeight: 400, fontSize: "22px", letterSpacing: "0.02em" } },
  { id: "bodegas",       name: <>Bodegas<br/>Campanar</>,                                         style: { fontFamily: "Georgia, serif", fontWeight: 700, fontSize: "17px", letterSpacing: "0.02em", textTransform: "uppercase", lineHeight: 1.2 } },
  { id: "jp",            name: "JP Fisioterápia",     style: { fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 800, fontSize: "22px", letterSpacing: "-0.03em" } },
  { id: "calma",         name: "CoCreate Succes",     style: { fontFamily: "Georgia, serif", fontWeight: 400, fontStyle: "italic", fontSize: "20px", letterSpacing: "0.04em" } },
];


const Clients = ({ t }) =>
<section className="section wrap" style={{ padding: "100px 24px" }}>
    <div className="brands-head" style={{ margin: "0px 0px 28px" }}>
      <div className="eyebrow reveal" style={{ justifyContent: "center" }}>
        {t.clients?.title || "Trusted by"}
      </div>
    </div>
    <div className="brands-grid">
      {BRANDS.map((b, i) =>
        <div key={b.id}
          className="brand-cell reveal"
          data-d={(i % 5 * 60).toString()}>
          <span className="brand-name" style={b.style}>{b.name}</span>
        </div>
      )}
    </div>
  </section>;


/* ---------- FAQ ---------- */
const FAQ = ({ t }) =>
<section className="section wrap">
    <div className="faq-grid" style={{ margin: "0px 24px" }}>
      <div className="faq-intro">
        <div className="eyebrow reveal">{t.faq.eyebrow}</div>
        <h2 className="reveal">{t.faq.title.split(" ").length > 2 ? <>{t.faq.title.split(" ").slice(0, -1).join(" ")} <span className="ink">{t.faq.title.split(" ").slice(-1)[0]}</span></> : t.faq.title}</h2>
        <p className="reveal" data-d="100">{t.faq.sub}</p>
      </div>
      <div className="faq-list">
        {t.faq.items.map((it, i) =>
      <details className="faq-item reveal" key={i} data-d={(i % 4 * 80).toString()}>
            <summary className="q">
              {it.q}
              <span className="ico">+</span>
            </summary>
            <div className="a">{it.a}</div>
          </details>
      )}
      </div>
    </div>
  </section>;


/* ---------- CONTACT ---------- */
const Contact = ({ t }) => {
  const [sent, setSent] = useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 3000);
  };

  return (
    <section className="section wrap" id="contact">
      <div className="contact-wrap">
        <div className="blob" />
        <div className="contact-grid">
          <div className="contact-left">
            <div className="eyebrow reveal" style={{ color: "color-mix(in srgb, var(--bg) 60%, transparent)" }}>{t.contact.eyebrow}</div>
            <h2 className="reveal">{t.contact.title.split(" ").map((w, i, arr) =>
              <React.Fragment key={i}>{i === arr.length - 1 ? <span className="ink">{w}</span> : w}{i < arr.length - 1 ? " " : ""}</React.Fragment>
              )}</h2>
            <p className="reveal" data-d="100">{t.contact.sub}</p>

            <div className="contact-info reveal" data-d="200">
              <div className="row">
                <div className="ico">✉</div>
                <div>
                  <div className="k">{t.contact.info.email}</div>
                  <div className="v"><a href="mailto:contacto@franruiz.es">contacto@franruiz.es</a></div>
                </div>
              </div>
              <div className="row">
                <div className="ico">☎</div>
                <div>
                  <div className="k">{t.contact.info.phoneCh}</div>
                  <div className="v"><a href="tel:+41767312517">+41 076 73 125 17</a></div>
                </div>
              </div>
              <div className="row">
                <div className="ico">☎</div>
                <div>
                  <div className="k">{t.contact.info.phoneEs}</div>
                  <div className="v"><a href="tel:+34666401757">+34 666 40 17 57</a></div>
                </div>
              </div>
              <div className="row">
                <div className="ico">📍</div>
                <div>
                  <div className="k">{t.contact.info.location}</div>
                  <div className="v">Bern, Switzerland</div>
                </div>
              </div>
              <div className="row">
                <div className="ico">in</div>
                <div>
                  <div className="k">{t.contact.info.linkedin}</div>
                  <div className="v"><a href="https://www.linkedin.com/in/francisco-ruiz-ruiz-digital-solutions/" target="_blank" rel="noreferrer">/francisco-ruiz-ruiz-digital-solutions</a></div>
                </div>
              </div>
            </div>
          </div>

          <form className="contact-form reveal" data-d="200" onSubmit={onSubmit}>
            <div className="field">
              <label>{t.contact.form.name}</label>
              <input type="text" placeholder={t.contact.form.namep} required />
            </div>
            <div className="field">
              <label>{t.contact.form.email}</label>
              <input type="email" placeholder={t.contact.form.emailp} required />
            </div>
            <div className="field">
              <label>{t.contact.form.budget}</label>
              <select defaultValue="">
                <option value="" disabled>—</option>
                <option>&lt; CHF 2,000</option>
                <option>CHF 2,000 – 5,000</option>
                <option>CHF 5,000 – 10,000</option>
                <option>&gt; CHF 10,000</option>
              </select>
            </div>
            <div className="field">
              <label>{t.contact.form.message}</label>
              <textarea placeholder={t.contact.form.messagep} required />
            </div>
            <button type="submit">
              {sent ? "✓ Sent" : t.contact.form.send}
              <span>→</span>
            </button>
          </form>
        </div>
      </div>
    </section>);

};

/* ---------- FOOTER ---------- */
const Footer = ({ t }) =>
<footer className="wrap footer-wrap">
    <div className="footer">
      <div className="footer-left">
        <div className="big" style={{ color: "rgb(75, 75, 75)" }}>
          <span style={{ color: "#1a1a1a" }}>{t.footer.tagline}</span><br />
          <span className="ink">{t.footer.taglineInk}</span>
        </div>
      </div>
    </div>
    <div className="footer-bottom" style={{ padding: "20px 0px 80px" }}>
      <div>{t.footer.copyright}</div>
      <div className="socials">
        <a href="https://www.linkedin.com/in/francisco-ruiz-ruiz-digital-solutions/" target="_blank" rel="noreferrer">LinkedIn</a>
        <a href="mailto:contacto@franruiz.es">Email</a>
        <a href="https://wa.me/41767312517" target="_blank" rel="noreferrer">WhatsApp</a>
      </div>
    </div>
  </footer>;


Object.assign(window, { Nav, Hero, Marquee, About, Work, Services, Tech, Pricing, Testimonials, Clients, FAQ, Contact, Footer });