// Secciones — Rossetto Studio v9 (focused, trust signals, treatments + process)

const { useState, useEffect, useRef, createContext, useContext } = React;

// ===== Language context =====
window.LangContext = createContext({ lang: "es", t: null, setLang: () => {} });
const useT = () => useContext(window.LangContext).t;

// ===== Editorial image w/ fallback =====
function EditorialImage({ src, alt = "", caption, num, className = "", tone, style }) {
  const [failed, setFailed] = useState(false);
  const imgRef = useRef(null);
  useEffect(() => {
    if (failed) return;
    const check = () => {
      const el = imgRef.current;
      if (el && el.complete && (el.naturalWidth === 0 || el.naturalHeight === 0)) setFailed(true);
    };
    const id = setTimeout(check, 2500);
    return () => clearTimeout(id);
  }, [src, failed]);
  return (
    <div className={`ed-img ${tone ? `tone-${tone}` : ""} ${className}`} style={style}>
      {!failed && (
        <img ref={imgRef} src={src} alt={alt} loading="lazy"
          onLoad={(e) => { if (e.target.naturalWidth === 0) setFailed(true); }}
          onError={() => setFailed(true)} />
      )}
      {failed && <div className="ph" style={{ position: "absolute", inset: 0, border: 0 }}>
        <span className="ph-label">{caption || "Atmósfera"}</span>
      </div>}
      {num && <span className="num">{num}</span>}
      {caption && <span className="cap">{caption}</span>}
    </div>
  );
}

// ===== SPINE =====
function Spine() {
  const { lang } = useContext(window.LangContext);
  const t = useT();
  const [pct, setPct] = useState(0);
  const [section, setSection] = useState("intro");
  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      const p = max > 0 ? Math.min(100, Math.max(0, (window.scrollY / max) * 100)) : 0;
      setPct(p);
      const ids = ["intro","studio","pillars","sectors","capabilities","treatments","process","contact"];
      const center = window.scrollY + window.innerHeight * 0.35;
      let cur = "intro";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= center) cur = id;
      }
      setSection(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const labels = {
    intro: "Manifiesto", studio: t.nav.studio, pillars: t.nav.pillars,
    sectors: t.nav.sectors, capabilities: "Capacidades", treatments: t.nav.treatments,
    process: t.nav.process, contact: t.nav.contact,
  };
  return (
    <aside className="spine" aria-hidden="true">
      <div className="spine-progress" style={{ height: `${pct}%` }}></div>
      <div className="spine-top">
        <span className="spine-text">Rossetto · {lang.toUpperCase()}</span>
      </div>
      <div className="spine-mid"><span className="spine-mark"></span></div>
      <div className="spine-bot">
        <span className="spine-percent">{Math.round(pct).toString().padStart(2,"0")} / {labels[section].toUpperCase()}</span>
      </div>
    </aside>
  );
}

// ===== NAV =====
function BubbleLangSwitch() {
  const { lang, setLang } = useContext(window.LangContext);
  const [open, setOpen] = useState(false);
  const ref = React.useRef(null);
  useEffect(() => {
    if (!open) return;
    const onDocClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onDocClick);
    return () => document.removeEventListener("mousedown", onDocClick);
  }, [open]);
  const others = ["es","en","it"].filter(l => l !== lang);
  const pick = (l) => { setLang(l); setOpen(false); };
  return (
    <div className={`bubble-lang ${open ? "on" : ""}`} ref={ref}>
      <button
        type="button"
        className="bubble bubble-active"
        onClick={() => setOpen(o => !o)}
        aria-haspopup="true"
        aria-expanded={open}
        aria-label={`Idioma ${lang.toUpperCase()}`}
      >{lang.toUpperCase()}</button>
      {others.map((l, i) => (
        <button
          key={l}
          type="button"
          className="bubble bubble-opt"
          style={{ transitionDelay: open ? `${i * 40}ms` : "0ms" }}
          tabIndex={open ? 0 : -1}
          onClick={() => pick(l)}
          aria-label={`Elegir idioma ${l.toUpperCase()}`}
        >{l.toUpperCase()}</button>
      ))}
    </div>
  );
}

function Nav() {
  const t = useT();
  const [compact, setCompact] = useState(false);
  useEffect(() => {
    const onScroll = () => setCompact(window.scrollY > 60);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <React.Fragment>
      <nav className={`nav ${compact ? "compact" : ""}`}>
        <div className="container nav-inner">
          <a href="index.html" className="brand" aria-label="Rossetto Studio">
            <img className="logo-img" src="assets/logo-rossetto-studio-white.jpg" alt="Rossetto Studio" />
          </a>
          <div className="nav-end">
            <BubbleLangSwitch />
            <a href="/calculadora-presupuesto-eventos" className="nav-cta nav-cta-accent">{t.nav.designer}</a>
          </div>
        </div>
      </nav>

      <a href="/calculadora-presupuesto-eventos" className="mobile-contact-fab" aria-label={t.nav.designer}>
        <span>✦</span>{t.nav.designer}
      </a>
    </React.Fragment>
  );
}

// ===== DESIGNER INVITE (home teaser — links to /calculadora-presupuesto-eventos) =====
function DesignerInvite() {
  const t = useT();
  const d = window.DESIGNER[useContext(window.LangContext).lang];
  return (
    <section className="designer-invite" id="designer">
      <div className="container designer-invite-inner">
        <span className="eyebrow">{d.eyebrow}</span>
        <h2 className="designer-invite-title">{d.title}</h2>
        <p className="designer-invite-lead">{d.lead}</p>
        <a href="/calculadora-presupuesto-eventos" className="designer-invite-cta">
          <span>{d.start}</span><span className="arrow">→</span>
        </a>
        <div className="designer-invite-meta">
          <span>VI · {d.sceneOf.toUpperCase()}S</span>
          <span>—</span>
          <span>~3 MIN</span>
          <span>—</span>
          <span>{d.close.rangeNote.split('—')[0].trim()}</span>
        </div>
      </div>
    </section>
  );
}

// ===== EXPERIENCE DESIGNER =====
function Designer() {
  const { lang } = useContext(window.LangContext);
  const d = window.DESIGNER[lang];
  const P = window.DESIGNER_PRICING;
  const [step, setStep] = useState(-1); // -1 cover, 0..5 scenes, 6 close
  const [picks, setPicks] = useState({}); // sceneIdx -> optionKey
  const [direction, setDirection] = useState(1);

  const total = d.scenes.length;
  const pct = step < 0 ? 0 : step === total ? 100 : ((step + 1) / (total + 1)) * 100;

  const go = (to) => {
    setDirection(to > step ? 1 : -1);
    setStep(to);
  };
  const select = (key) => {
    setPicks(p => ({ ...p, [step]: key }));
    if (step < total - 1) setTimeout(() => go(step + 1), 320);
    else setTimeout(() => go(total), 320);
  };
  const skip = () => { if (step < total - 1) go(step + 1); else go(total); };

  const range = React.useMemo(() => {
    const form  = picks[0];
    const size  = picks[1] || "s50";
    const dur   = picks[2] || "d1";
    const loc   = picks[3] || "city";
    const hotel = picks[4] || "noHotel";
    const prod  = picks[5] || "avMid";
    const base  = P.size[size];
    if (!base) return null;
    const m = (P.form[form] || 1) * P.duration[dur] * P.location[loc] * P.accommodation[hotel] * P.production[prod];
    const lo = Math.round(base[0] * m / 5000) * 5000;
    const hi = Math.round(base[1] * m / 5000) * 5000;
    return [lo, hi];
  }, [picks]);

  return (
    <section className="designer" id="designer">
      {/* COVER */}
      {step === -1 && (
        <div className="designer-cover">
          <div className="designer-cover-inner container">
            <span className="eyebrow">{d.eyebrow}</span>
            <h2 className="designer-cover-title">{d.title}</h2>
            <p className="designer-cover-lead">{d.lead}</p>
            <button className="designer-begin" onClick={() => go(0)}>
              <span>{d.start}</span><span className="arrow">→</span>
            </button>
            <div className="designer-cover-meta">
              <span>VI · {d.sceneOf.toUpperCase()}S</span>
              <span>—</span>
              <span>~3 MIN</span>
            </div>
          </div>
        </div>
      )}

      {/* SCENES */}
      {step >= 0 && step < total && d.scenes.map((sc, i) => (
        i === step && (
          <div className={`designer-scene dir-${direction}`} key={i}>
            <div className="designer-progress">
              <div className="designer-progress-bar" style={{ width: `${pct}%` }}></div>
            </div>
            <div className="container designer-scene-inner">
              <div className="designer-scene-head">
                <div className="designer-scene-num">{d.sceneOf} {sc.num} / {String(total).padStart(2,'0')}</div>
                <div className="designer-scene-over">— {sc.overline}{sc.optional && <span className="designer-opt"> · {d.optional}</span>}</div>
              </div>
              <h3 className="designer-scene-title">{sc.title}</h3>
              <ul className={`designer-options opts-${sc.options.length}`}>
                {sc.options.map(([k, label, desc, photoUrl]) => (
                  <li key={k} className={k === 'avShow' ? 'opt-featured' : ''}>
                    <button
                      className={`designer-card ${picks[step] === k ? 'on' : ''}`}
                      onClick={() => select(k)}
                    >
                      {photoUrl && (
                        <div
                          className="designer-card-bg"
                          style={{ backgroundImage: `url(${photoUrl})` }}
                        />
                      )}
                      <span className="designer-card-num">{(sc.options.findIndex(o => o[0] === k) + 1).toString().padStart(2,'0')}</span>
                      <span className="designer-card-label">{label}</span>
                      {desc && <span className="designer-card-desc">{desc}</span>}
                      <span className="designer-card-arrow">→</span>
                    </button>
                  </li>
                ))}
              </ul>
              <div className="designer-nav">
                {step > 0
                  ? <button className="designer-nav-btn" onClick={() => go(step - 1)}>← {d.back}</button>
                  : <span></span>}
                {sc.optional && <button className="designer-nav-btn" onClick={skip}>{d.skip} →</button>}
              </div>
            </div>
          </div>
        )
      ))}

      {/* CLOSE */}
      {step === total && <DesignerClose d={d} picks={picks} range={range} onRestart={() => { setPicks({}); go(-1); }} />}
    </section>
  );
}

function DesignerClose({ d, picks, range, onRestart }) {
  const c = d.close;
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name:"", company:"", email:"" });
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => { e.preventDefault(); setSent(true); setTimeout(() => setSent(false), 5000); };
  const fmt = (n) => new Intl.NumberFormat('es-ES').format(n) + " €";
  // Build silhouette summary from picks
  const summary = [];
  d.scenes.forEach((sc, i) => {
    const k = picks[i];
    if (!k) return;
    const opt = sc.options.find(o => o[0] === k);
    if (opt) summary.push({ overline: sc.overline, label: opt[1] });
  });
  return (
    <div className="designer-close">
      <div className="container designer-close-inner">
        <span className="eyebrow">{c.eyebrow}</span>
        <h2 className="designer-close-title">{c.title}</h2>

        <div className="designer-range">
          {range
            ? <span className="designer-range-val"><em>{fmt(range[0])}</em> — <em>{fmt(range[1])}</em></span>
            : <span className="designer-range-val">—</span>}
          <span className="designer-range-note">{c.rangeNote}</span>
        </div>

        <div className="designer-close-cols">
          <div className="designer-close-left">
            <div className="designer-summary-head">— {c.summaryHead}</div>
            <ul className="designer-summary-list">
              {summary.map((s, i) => (
                <li key={i}>
                  <span className="ds-k">{s.overline}</span>
                  <span className="ds-v">{s.label}</span>
                </li>
              ))}
            </ul>
            <p className="designer-disclaimer">{c.disclaimer}</p>
            <button className="designer-restart" onClick={onRestart}>{c.restart} ↺</button>
          </div>

          <div className="designer-close-right">
            <h3 className="designer-cta-title">{c.ctaTitle}</h3>
            <p className="designer-cta-lead">{c.ctaLead}</p>
            <form className="designer-form" onSubmit={submit}>
              <div className="field"><label>{c.f.name}</label>
                <input required value={form.name} onChange={upd("name")} /></div>
              <div className="field"><label>{c.f.company}</label>
                <input value={form.company} onChange={upd("company")} /></div>
              <div className="field"><label>{c.f.email}</label>
                <input type="email" required value={form.email} onChange={upd("email")} /></div>
              <button className="submit" type="submit" disabled={sent}>
                {sent ? c.f.sent : c.f.send}
              </button>
            </form>
          </div>
        </div>

      </div>
    </div>
  );
}

// ===== EXPERIENCE DESIGNER ENDS =====

// ===== HERO CAROUSEL =====
function HeroCarousel({ slides }) {
  const t = useT();
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setIdx(i => (i + 1) % slides.length), 5200);
    return () => clearInterval(id);
  }, [slides.length]);
  const tc = `00:${String(idx + 1).padStart(2, '0')} / ${String(slides.length).padStart(2, '0')}`;
  const cap = (t.hero.captions && t.hero.captions[slides[idx].key]) || "";
  return (
    <div className="hero-carousel">
      {slides.map((s, i) => (
        <img key={i} src={s.src} alt="" className={i === idx ? 'on' : ''} loading={i === 0 ? 'eager' : 'lazy'} />
      ))}
      <div className="hero-carousel-grain" aria-hidden="true"></div>
      <div className="hero-carousel-tc" aria-hidden="true">
        <span className="rec"></span>REC · {tc}
      </div>
      <div className="hero-carousel-dots">
        {slides.map((_, i) => (
          <span key={i} className={i === idx ? 'on' : ''} onClick={() => setIdx(i)}></span>
        ))}
      </div>
      <div className="hero-carousel-credit">{cap}</div>
    </div>
  );
}

// ===== HERO (magazine cover) =====
function Hero() {
  const { lang } = useContext(window.LangContext);
  const t = useT();
  const onTocClick = (href) => (e) => {
    e.preventDefault();
    document.querySelector(href)?.scrollIntoView({ behavior: 'smooth' });
  };
  return (
    <section className="hero" id="top">
      <div className="hero-left">
        <div className="hero-masthead">
          <div className="vol-left">
            <span className="dash"></span>Vol. <b>I</b>
            <span className="vol-sub">MMXXVI · Madrid</span>
          </div>
          <div className="vol">
            {t.cover.issue}
            <b>N.° 01</b>
          </div>
        </div>
        <h1 className="hero-cover-line">
          <span className="small">— {t.hero.eyebrow}</span>
          {t.cover.line}
        </h1>
        <ul className="hero-toc">
          {t.cover.toc.map((row, i) => (
            <li key={i} onClick={onTocClick(row.href)}>
              <span className="n">{row.n}</span>
              <span>{row.title}</span>
              <span className="pg">{row.pg}</span>
            </li>
          ))}
        </ul>
        <a href="#intro" className="hero-scroll-cue-mag">
          {t.hero.scroll}<span className="down"></span>
        </a>
      </div>
      <div className="hero-right">
        <HeroCarousel slides={window.IMAGES.heroCarousel} />
      </div>
    </section>
  );
}

// ===== MANIFESTO =====
function Manifesto() {
  const t = useT();
  return (
    <section className="section container" id="intro">
      <div className="manifesto">
        <div className="manifesto-side"><span className="eyebrow">{t.intro.eyebrow}</span></div>
        <div className="manifesto-main">
          <h2 className="manifesto-title">{t.intro.title}</h2>
          <p className="manifesto-body">{t.intro.body}</p>
          <p className="manifesto-foot">— {t.intro.foot}</p>
        </div>
      </div>
    </section>
  );
}

// ===== STUDIO / TEAM (anonymous collective) =====
function Studio() {
  const t = useT().studio;
  return (
    <section className="section alt" id="studio">
      <div className="container">
        <div className="sec-head">
          <div><span className="eyebrow">{t.eyebrow}</span></div>
          <div>
            <h2 className="sec-title">{t.title}</h2>
            <p className="sec-lead" style={{ marginTop: 24 }}>{t.lead}</p>
          </div>
        </div>
        <div className="studio-with-image">
          <div className="studio-image">
            <img src={window.IMAGES.studio} alt="Madrid" loading="lazy" />
          </div>
          <div className="studio-grid-team">
            <div className="studio-team-block">
              <div className="studio-team-label">— {t.teamLabel}</div>
              <p className="studio-team-body">{t.teamBody}</p>
              <ul className="studio-team-list">
                <li><span className="studio-team-city">Madrid</span><span className="studio-team-role">Sede del equipo permanente</span></li>
              </ul>
            </div>
            <div className="studio-team-block">
              <div className="studio-team-label">— {t.networkLabel}</div>
              <p className="studio-team-body">{t.networkBody}</p>
              <ul className="studio-team-list">
                <li><span className="studio-team-city">Europa</span><span className="studio-team-role">Madrid · Milán · París · Londres · Lisboa</span></li>
                <li><span className="studio-team-city">México</span><span className="studio-team-role">CDMX · Monterrey</span></li>
                <li><span className="studio-team-city">EE.UU.</span><span className="studio-team-role">New York · Miami · Los Angeles</span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== ATMOSPHERE strip (visual break) =====
function Atmosphere() {
  return (
    <section className="atmosphere-strip">
      <div className="atmosphere-grid">
        <div className="atm-tile atm-tile-wide"><img src={window.IMAGES.atm1} alt="" loading="lazy" /></div>
        <div className="atm-tile"><img src={window.IMAGES.atm2} alt="" loading="lazy" /></div>
      </div>
    </section>
  );
}

// ===== PILLARS =====
function Pillars() {
  const { lang } = useContext(window.LangContext);
  const t = useT();
  const items = window.PILLARS[lang];
  return (
    <section className="section container" id="pillars">
      <div className="sec-head">
        <div><span className="eyebrow">{t.pillars.eyebrow}</span></div>
        <div>
          <h2 className="sec-title">{t.pillars.title}</h2>
          <p className="sec-lead" style={{ marginTop: 24 }}>{t.pillars.lead}</p>
        </div>
      </div>
      <ol className="pillars">
        {items.map((p) => (
          <li className="pillar" key={p.n}>
            <div className="pillar-num">{p.n}</div>
            <h3 className="pillar-title">{p.title}</h3>
            <p className="pillar-body">{p.body}</p>
          </li>
        ))}
      </ol>
    </section>
  );
}

// ===== SECTORS (focused 3 + other-sectors addendum) =====
function Sectors() {
  const { lang } = useContext(window.LangContext);
  const t = useT();
  const items = window.SECTORS[lang];
  const [active, setActive] = useState(0);
  const cur = items[active];
  return (
    <section className="section alt" id="sectors">
      <div className="container">
        <div className="sec-head">
          <div><span className="eyebrow">{t.sectors.eyebrow}</span></div>
          <div>
            <h2 className="sec-title">{t.sectors.title}</h2>
            <p className="sec-lead" style={{ marginTop: 24 }}>{t.sectors.lead}</p>
          </div>
        </div>
        <div className="sectors-grid">
          <ol className="sectors-list">
            {items.map((s, i) => (
              <li key={s.n} className={`sector-row ${active === i ? "on" : ""}`}
                onMouseEnter={() => setActive(i)} onFocus={() => setActive(i)}>
                <span className="sector-n">{s.n}</span>
                <span className="sector-name">{s.name}</span>
                <span className="sector-arrow">→</span>
              </li>
            ))}
          </ol>
          <div className="sectors-detail">
            <span className="sectors-detail-pre">— {cur.n.toUpperCase()} / {cur.name}</span>
            <p className="sectors-detail-body">{cur.body}</p>
            {cur.formats && (
              <div className="sectors-detail-formats">
                <div className="sectors-detail-formats-label">— {t.sectors.formatsLabel}</div>
                <ul>{cur.formats.map((f) => <li key={f}>{f}</li>)}</ul>
              </div>
            )}
            <div className="sectors-detail-hint">{t.sectors.hint}</div>
          </div>
        </div>
        <div className="sectors-other">
          <div className="sectors-other-label">— {t.sectors.otherTitle}</div>
          <p className="sectors-other-body">{t.sectors.otherBody}</p>
        </div>
      </div>
    </section>
  );
}

// ===== CAPABILITIES (operational data) =====
function Capabilities() {
  const { lang } = useContext(window.LangContext);
  const t = useT();
  const cap = window.CAPABILITIES[lang];
  const blocks = ["size","geo","formats","timeline"];
  return (
    <section className="section container" id="capabilities">
      <div className="sec-head">
        <div><span className="eyebrow">{t.capabilities.eyebrow}</span></div>
        <div>
          <h2 className="sec-title">{t.capabilities.title}</h2>
          <p className="sec-lead" style={{ marginTop: 24 }}>{t.capabilities.lead}</p>
        </div>
      </div>
      <div className="cap-grid">
        {blocks.map((k) => (
          <div className="cap-block" key={k}>
            <div className="cap-block-label">— {cap[k].label}</div>
            <ul className="cap-block-list">
              {cap[k].items.map((it, i) => (
                <li key={i}>
                  <span className="cap-key">{it[0]}</span>
                  {it[1] && <span className="cap-val">{it[1]}</span>}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

// ===== TREATMENTS (3 conceptual proposals) =====
function Treatments() {
  const { lang } = useContext(window.LangContext);
  const t = useT();
  const items = window.TREATMENTS[lang];
  const imgs = [window.IMAGES.treatment1, window.IMAGES.treatment2, window.IMAGES.treatment3];
  return (
    <section className="section alt" id="treatments">
      <div className="container">
        <div className="sec-head">
          <div><span className="eyebrow">{t.treatments.eyebrow}</span></div>
          <div>
            <h2 className="sec-title">{t.treatments.title}</h2>
            <p className="sec-lead" style={{ marginTop: 24 }}>{t.treatments.lead}</p>
          </div>
        </div>
        <div className="treatments">
          {items.map((tr, i) => {
            const imgKeys = ['treatment1', 'treatment2', 'treatment3'];
            const imgSrc = window.IMAGES[imgKeys[i]] || window.IMAGES.treatment1;
            return (
            <article className="treatment" key={tr.n}>
              <div className="treatment-img">
                <div className="ed-img">
                  <img src={imgSrc} alt={tr.title} loading="lazy" />
                </div>
              </div>
              <div className="treatment-body">
                <div className="treatment-meta">
                  <span className="treatment-status">{tr.status}</span>
                  <span className="treatment-tag">— {tr.tag}</span>
                </div>
                <h3 className="treatment-title">{tr.title}</h3>
                <p className="treatment-lead">{tr.lead}</p>
                <p className="treatment-body-text">{tr.body}</p>
                <div className="treatment-kpi">
                  <div className="treatment-kpi-label">— {t.treatments.kpiLabel}</div>
                  <ul>{tr.kpi.map((k) => <li key={k}>{k}</li>)}</ul>
                </div>
              </div>
            </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ===== PROCESS =====
function Process() {
  const { lang } = useContext(window.LangContext);
  const t = useT();
  const steps = window.PROCESS[lang];
  return (
    <section className="section container" id="process">
      <div className="sec-head">
        <div><span className="eyebrow">{t.process.eyebrow}</span></div>
        <div>
          <h2 className="sec-title">{t.process.title}</h2>
          <p className="sec-lead" style={{ marginTop: 24 }}>{t.process.lead}</p>
        </div>
      </div>
      <ol className="process-list">
        {steps.map((s) => (
          <li className="process-step" key={s.n}>
            <div className="process-n">{s.n}</div>
            <div className="process-content">
              <h3 className="process-title">{s.title}</h3>
              <p className="process-body">{s.body}</p>
            </div>
            <div className="process-delivery">
              <div className="process-delivery-label">— {t.process.deliveryLabel}</div>
              <div className="process-delivery-val">{s.delivery}</div>
            </div>
          </li>
        ))}
      </ol>
    </section>
  );
}

// ===== BLEED =====
function Bleed() {
  const t = useT();
  return (
    <section className="bleed">
      <img src={window.IMAGES.bleed} alt="" loading="lazy"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <span className="bleed-tl"><span className="dash"></span>{t.bleed.tl}</span>
      <div className="container bleed-inner">
        <p className="bleed-quote">{t.bleed.quote}</p>
      </div>
      <div className="container bleed-meta-wrap">
        <div className="bleed-meta">{t.bleed.meta}</div>
      </div>
    </section>
  );
}

// ===== CONTACT =====
function Contact() {
  const t = useT();
  const f = t.contact.form;
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({
    name:"", company:"", email:"",
    sector: f.sectorOptions[0], type: f.typeOptions[0], brief:"",
  });
  useEffect(() => {
    setForm((s) => ({ ...s, sector: f.sectorOptions[0], type: f.typeOptions[0] }));
  }, [t]); // eslint-disable-line react-hooks/exhaustive-deps
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => { e.preventDefault(); setSent(true); setTimeout(() => setSent(false), 5000); };
  return (
    <section className="container contact-section" id="contact">
      <div className="contact">
        <div className="contact-left">
          <span className="eyebrow">{t.contact.eyebrow}</span>
          <h2 className="contact-title">{t.contact.title}</h2>
          <p className="contact-lead">{t.contact.lead}</p>
          <dl className="contact-info">
            <div><dt>{t.contact.email}</dt><dd><a href={`mailto:${t.contact.emailVal}`}>{t.contact.emailVal}</a></dd></div>
            <div><dt>{t.contact.basedIn}</dt><dd>{t.contact.basedInVal}</dd></div>
            <div><dt>{t.contact.hours}</dt><dd>{t.contact.hoursVal}</dd></div>
          </dl>
        </div>
        <form className="form" onSubmit={submit}>
          <div className="field-row">
            <div className="field"><label>{f.name}</label>
              <input required value={form.name} onChange={update("name")} placeholder={f.namePh} /></div>
            <div className="field"><label>{f.company}</label>
              <input value={form.company} onChange={update("company")} placeholder={f.companyPh} /></div>
          </div>
          <div className="field"><label>{f.email}</label>
            <input type="email" required value={form.email} onChange={update("email")} placeholder={f.emailPh} /></div>
          <div className="field-row">
            <div className="field"><label>{f.sector}</label>
              <select value={form.sector} onChange={update("sector")}>
                {f.sectorOptions.map((o) => <option key={o}>{o}</option>)}
              </select></div>
            <div className="field"><label>{f.type}</label>
              <select value={form.type} onChange={update("type")}>
                {f.typeOptions.map((o) => <option key={o}>{o}</option>)}
              </select></div>
          </div>
          <div className="field"><label>{f.brief}</label>
            <textarea value={form.brief} onChange={update("brief")} placeholder={f.briefPh} /></div>
          <button className="submit" type="submit" disabled={sent}>
            {sent ? f.sent : `${f.submit} →`}
          </button>
        </form>
      </div>
    </section>
  );
}

// ===== FOOTER (with trust signals) =====
function Footer() {
  const t = useT();
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-top">
          <div>
            <img className="foot-brand-logo" src="assets/logo-rossetto-studio-white.jpg" alt="Rossetto" />
            <p className="foot-tag">{t.foot.tag}</p>
          </div>
          <div>
            <h4>{t.foot.groupHead}</h4>
            <p className="foot-group">{t.foot.group}</p>
          </div>
          <div>
            <h4>{t.foot.trustHead}</h4>
            <ul className="trust-list">
              {t.foot.trust.map(([k, v], i) => (
                <li key={i}><span className="tk">{k}</span><span className="tv">{v}</span></li>
              ))}
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>{t.foot.copyright}</span>
          <div className="foot-bottom-legal">
            {t.foot.legal.map((l) => <a key={l} href="#">{l}</a>)}
          </div>
          <span>Made in Madrid</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, Hero, Manifesto, Studio, Atmosphere, Pillars, Sectors, Capabilities,
  Treatments, Process, Designer, DesignerInvite, Bleed, Contact, Footer, EditorialImage, Spine
});