/* global React */
// sections.jsx — Componentes de las secciones de la home

const { useEffect, useRef, useState } = React;

/* ────── Reveal on scroll ────── */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => e.isIntersecting && e.target.classList.add("in")),
      { threshold: 0.15 }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return ref;
}

function Reveal({ children, as = "div", className = "", ...rest }) {
  const ref = useReveal();
  const Tag = as;
  return (
    <Tag ref={ref} className={`reveal ${className}`} {...rest}>
      {children}
    </Tag>);

}

/* ────── Hero ────── */
function Hero({ t, onCTA }) {
  return (
    <section className="hero" id="hero">
      <div className="container">
        <Reveal className="hero__inner">
          <div>
            <span className="eyebrow">{t.hero.eyebrow}</span>
            <h1 className="display" style={{ marginTop: 24 }}>
              {t.hero.title_pre} <em>{t.hero.title_em}</em> {t.hero.title_post}
            </h1>
          </div>
          <div>
            <p className="lead" style={{ marginBottom: 28 }}>
              {t.hero.lead}
            </p>
            <div className="hero__ctas">
              <button className="btn" onClick={() => onCTA("investor")}>
                {t.cta.investors}
                <span className="arrow">→</span>
              </button>
              <button className="btn btn--ghost" onClick={() => onCTA("founder")}>
                {t.cta.founders}
                <span className="arrow">→</span>
              </button>
            </div>
          </div>
        </Reveal>

        <Reveal className="hero__strip">
          {t.hero.meta.map((m, i) =>
          <div key={i}>
              <div className="num">{m.dd}</div>
              <div className="lbl">{m.dt}</div>
            </div>
          )}
        </Reveal>
      </div>
    </section>);

}

/* ────── Tesis / Carta ────── */
function Tesis({ t }) {
  return (
    <section className="section section--cream" id="tesis">
      <div className="container">
        <Reveal className="tesis">
          <div className="tesis__intro">
            <span className="eyebrow">{t.tesis.eyebrow}</span>
            <h2 className="display" style={{ marginTop: 20 }}>
              {t.tesis.title_pre} <em>{t.tesis.title_em}</em> {t.tesis.title_post}
            </h2>
          </div>
          <div className="tesis__body">
            <p className="lead-line">{t.tesis.lead_line}</p>
            {t.tesis.paragraphs.map((p, i) =>
            <p key={i}>{p}</p>
            )}
            <p className="tesis__sign">{t.tesis.sign}</p>
          </div>
        </Reveal>

        {t.tesis.advantages &&
        <Reveal className="tesis__adv">
            <div className="tesis__adv-head">
              <span className="eyebrow">{t.tesis.advantages_title}</span>
            </div>
            <div className="tesis__adv-grid">
              {t.tesis.advantages.map((a, i) =>
            <div className="tesis__adv-cell" key={i} style={{ gap: "1px" }}>
                  <span className="tesis__adv-num">{String(i + 1).padStart(2, "0")}</span>
                  <h4>{a.h}</h4>
                  <p>{a.p}</p>
                </div>
            )}
            </div>
          </Reveal>
        }
      </div>
    </section>);

}

/* ────── Modelo Club Deal ────── */
function Modelo({ t }) {
  return (
    <section className="section modelo" id="modelo">
      <div className="container">
        <Reveal className="modelo__head">
          <span className="eyebrow">{t.modelo.eyebrow}</span>
          <h2 className="display modelo__title">
            {t.modelo.title_pre} <em>{t.modelo.title_em}</em>
          </h2>
          <p className="lead modelo__lead">{t.modelo.lead}</p>
        </Reveal>

        <div className="modelo__rows">
          {t.modelo.diffs.map((d, i) =>
          <Reveal className="modelo__row" key={i}>
              <div className="modelo__row-id">
                <span className="modelo__roman">{d.tag}</span>
                <span className="modelo__count">0{i + 1} · 04</span>
              </div>
              <div className="modelo__row-title">
                <h3>{d.title}</h3>
                <p>{d.body}</p>
              </div>
              <div className="modelo__row-vs">
                <div className="vs-line vs-line--old">
                  <span className="vs-tag">{t.modelo.vs_label_old}</span>
                  <span className="vs-text">{d.vs_old}</span>
                </div>
                <div className="vs-line vs-line--pax">
                  <span className="vs-tag">{t.modelo.vs_label_pax}</span>
                  <span className="vs-text">{d.vs_pax}</span>
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ────── Enfoque de inversión ────── */
function Enfoque({ t }) {
  return (
    <section className="section" id="enfoque">
      <div className="container">
        <Reveal className="flex-spread" style={{ marginBottom: 48 }}>
          <div>
            <span className="eyebrow">{t.enfoque.eyebrow}</span>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", marginTop: 18 }}>
              {t.enfoque.title_pre} <em>{t.enfoque.title_em}</em>
            </h2>
          </div>
          <p className="lead" style={{ maxWidth: "32ch" }}>{t.enfoque.lead}</p>
        </Reveal>

        <Reveal className="enfoque__grid">
          {t.enfoque.cells.map((c, i) =>
          <div className="enfoque__cell" key={i}>
              <span className="kicker" style={{ margin: "0px 0px 12px 20px" }}>{c.k}</span>
              {c.big ? <div className="big"><em style={{ margin: "0px 20px" }}>{c.big}</em></div> : <h4 style={{ margin: "0px 0px 10px 20px" }}>{c.h}</h4>}
              {c.big && <h4 style={{ marginBottom: 12, fontSize: 18, fontStyle: "italic", color: "var(--muted)", margin: "0px 0px 12px 20px" }}>{c.h}</h4>}
              <p style={{ margin: "0px 0px 0px 20px" }}>{c.p}</p>
            </div>
          )}
        </Reveal>
      </div>
    </section>);

}

/* ────── Pilares (sección oscura) ────── */
function Pilares({ t }) {
  return (
    <section className="section section--ink" id="pilares">
      <div className="container">
        <Reveal className="flex-spread" style={{ marginBottom: 64 }}>
          <div>
            <span className="eyebrow">{t.pilares.eyebrow}</span>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", marginTop: 18 }}>
              {t.pilares.title_pre} <em>{t.pilares.title_em}</em>
            </h2>
          </div>
          <p className="lead" style={{ maxWidth: "32ch" }}>{t.pilares.lead}</p>
        </Reveal>

        <Reveal className="grid cols-3">
          {t.pilares.pillars.map((p, i) =>
          <div className="pillar" key={i}>
              <span className="roman">{p.roman}</span>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
            </div>
          )}
        </Reveal>
      </div>
    </section>);

}

/* ────── Proceso ────── */
function Proceso({ t }) {
  return (
    <section className="section section--ink" id="proceso" style={{ paddingTop: 0 }}>
      <div className="container">
        <Reveal style={{ marginBottom: 48 }}>
          <span className="eyebrow">{t.proceso.eyebrow}</span>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", marginTop: 18, maxWidth: "20ch" }}>
            {t.proceso.title_pre} <em>{t.proceso.title_em}</em>
          </h2>
        </Reveal>

        <Reveal className="process">
          {t.proceso.steps.map((s, i) =>
          <div className="process__step" key={i}>
              <span className="process__num">{s.n}</span>
              <h4>{s.h}</h4>
              <p>{s.p}</p>
            </div>
          )}
        </Reveal>
      </div>
    </section>);

}

/* ────── Comparativa ────── */
function Comparativa({ t }) {
  return (
    <section className="section" id="comparativa">
      <div className="container">
        <Reveal style={{ marginBottom: 48 }}>
          <span className="eyebrow">{t.comparativa.eyebrow}</span>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", marginTop: 18, maxWidth: "22ch" }}>
            {t.comparativa.title_pre} <em>{t.comparativa.title_em}</em>
          </h2>
          <p className="lead" style={{ marginTop: 18 }}>{t.comparativa.lead}</p>
        </Reveal>

        <Reveal className="compare">
          {/* header row */}
          <div className="compare__row">
            <div className="compare__cell compare__cell--label">&nbsp;</div>
            {t.comparativa.headers.map((h, i) =>
            <div key={i} className={"compare__cell compare__cell--head" + (i === 0 ? " compare__cell--featured" : "")}>
                <span>{h.title}</span>
                <small>{h.sub}</small>
              </div>
            )}
          </div>
          {t.comparativa.rows.map((row, ri) =>
          <div className="compare__row" key={ri}>
              <div className="compare__cell compare__cell--label">{row[0]}</div>
              <div className="compare__cell compare__cell--featured"><strong>{row[1]}</strong></div>
              <div className="compare__cell">{row[2]}</div>
              <div className="compare__cell">{row[3]}</div>
            </div>
          )}
        </Reveal>
      </div>
    </section>);

}

/* ────── Portfolio ────── */
function Portfolio({ t }) {
  return (
    <section className="section section--cream" id="portfolio">
      <div className="container">
        <Reveal className="flex-spread" style={{ marginBottom: 56 }}>
          <div>
            <span className="eyebrow">{t.portfolio.eyebrow}</span>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", marginTop: 18 }}>
              {t.portfolio.title_pre} <em>{t.portfolio.title_em}</em>
            </h2>
          </div>
          <p className="lead" style={{ maxWidth: "34ch" }}>{t.portfolio.lead}</p>
        </Reveal>

        <Reveal className="portfolio">
          {t.portfolio.cases.map((c) =>
          <article className="case" key={c.id}>
              <div
                className={`case__img ${c.logo ? "case__img--logo" : ""}`}
                style={c.logoBg ? { background: c.logoBg } : undefined}
              >
                {c.logo ?
              <img src={window.__resources && window.__resources[c.logoId] || c.logo} alt={c.name} loading="lazy" /> :
              <div className="placeholder" aria-hidden="true">{c.name}</div>
              }
              </div>
              <div className="case__body">
                <div className="kicker"><span>{c.tag}</span></div>
                <h3>{c.name}</h3>
                <p style={{ marginTop: 4 }}>{c.body}</p>
                {c.id === "pcp" &&
              <ul style={{
                marginTop: 12, paddingLeft: 18, fontSize: 13, color: "var(--muted)",
                display: "flex", flexDirection: "column", gap: 4
              }}>
                    {t.portfolio.pcp_subs.map((s, i) => <li key={i}>{s}</li>)}
                  </ul>
              }
                {c.id === "garlic" && c.subs &&
              <ul style={{
                marginTop: 12, paddingLeft: 18, fontSize: 13, color: "var(--muted)",
                display: "flex", flexDirection: "column", gap: 4
              }}>
                    {c.subs.map((s, i) => <li key={i}>{s}</li>)}
                  </ul>
              }
                <div className="case__meta">
                  <div>
                    Sector
                    <strong>{c.sector}</strong>
                  </div>
                  <div>
                    Status
                    <strong>{c.status}</strong>
                  </div>
                </div>
              </div>
            </article>
          )}
        </Reveal>
      </div>
    </section>);

}

/* ────── Equipo ────── */
function Equipo({ t }) {
  return (
    <section className="section" id="equipo">
      <div className="container">
        <Reveal className="flex-spread" style={{ marginBottom: 56 }}>
          <div>
            <span className="eyebrow">{t.equipo.eyebrow}</span>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", marginTop: 18 }}>
              {t.equipo.title_pre} <em>{t.equipo.title_em}</em>
            </h2>
          </div>
          <p className="lead" style={{ maxWidth: "32ch" }}>{t.equipo.lead}</p>
        </Reveal>

        <Reveal className="team">
          {t.equipo.members.map((m) =>
          <div className="member" key={m.id}>
              <div className="member__photo">
                {m.photo ?
              <img src={m.photo} alt={m.name} loading="lazy" /> :
              <div className="placeholder" aria-hidden="true">{m.name}</div>
              }
              </div>
              <span className="role">{m.role}</span>
              <h3>{m.name}</h3>
              <p className="member__bio">{m.bio}</p>
              <div className="member__links">
                <a href={m.li} target="_blank" rel="noopener noreferrer">LinkedIn ↗</a>
              </div>
            </div>
          )}
        </Reveal>
      </div>
    </section>);

}

/* ────── Contacto ────── */
function Contacto({ t, lang }) {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ role: t.contacto.f_role_opts[0] });

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <section className="section section--ink" id="contacto">
      <div className="container">
        <Reveal className="flex-spread" style={{ marginBottom: 56 }}>
          <div>
            <span className="eyebrow">{t.contacto.eyebrow}</span>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", marginTop: 18 }}>
              {t.contacto.title_pre} <em>{t.contacto.title_em}</em>
            </h2>
          </div>
          <p className="lead" style={{ maxWidth: "34ch" }}>{t.contacto.lead}</p>
        </Reveal>

        <Reveal className="contact">
          <div>
            <p style={{ fontSize: 14, color: "var(--on-dark-muted)", marginBottom: 14 }}>
              Pax Capital Partners SL<br />
              C/ Don Ramón de la Cruz 17, 3º D<br />
              28001 Madrid · España
            </p>
            <p style={{ fontSize: 14, color: "var(--on-dark-muted)" }}>
              <a href="mailto:info@paxcp.com" style={{ borderBottom: "1px solid var(--on-dark-line)" }}>
                info@paxcp.com
              </a>
            </p>
            <hr className="divider" style={{ margin: "32px 0" }} />
            <p style={{ fontSize: 12, color: "var(--on-dark-muted)", maxWidth: "44ch" }}>
              {lang === "es" ?
              "Responsable: Pax Capital Partners SL. Finalidad: gestionar tu consulta. Base legal: consentimiento. Más información en nuestra Política de Privacidad." :
              "Controller: Pax Capital Partners SL. Purpose: handle your enquiry. Legal basis: consent. More information in our Privacy Policy."}
            </p>
          </div>

          {submitted ?
          <div style={{
            border: "1px solid var(--on-dark-line)",
            padding: "32px 28px",
            display: "flex", flexDirection: "column", gap: 14,
            justifyContent: "center"
          }}>
              <span className="eyebrow" style={{ color: "var(--gold)" }}>✓ {lang === "es" ? "Enviado" : "Sent"}</span>
              <p style={{ fontFamily: "var(--font-display)", fontSize: 28, lineHeight: 1.15 }}>{t.contacto.thanks}</p>
            </div> :

          <form onSubmit={submit}>
              <div className="field--row">
                <div className="field">
                  <label>{t.contacto.f_name}</label>
                  <input required type="text" onChange={update("name")} />
                </div>
                <div className="field">
                  <label>{t.contacto.f_last}</label>
                  <input required type="text" onChange={update("last")} />
                </div>
              </div>
              <div className="field--row">
                <div className="field">
                  <label>{t.contacto.f_email}</label>
                  <input required type="email" onChange={update("email")} />
                </div>
                <div className="field">
                  <label>{t.contacto.f_phone}</label>
                  <input type="tel" onChange={update("phone")} />
                </div>
              </div>
              <div className="field">
                <label>{t.contacto.f_role}</label>
                <select value={form.role} onChange={update("role")}>
                  {t.contacto.f_role_opts.map((o, i) => <option key={i}>{o}</option>)}
                </select>
              </div>
              <div className="field">
                <label>{t.contacto.f_msg}</label>
                <textarea rows="3" onChange={update("msg")} />
              </div>
              <label className="checkrow">
                <input required type="checkbox" />
                <span dangerouslySetInnerHTML={{ __html: t.contacto.f_consent }} />
              </label>
              <button className="btn btn--on-dark" style={{ marginTop: 22 }}>
                {t.contacto.submit}
                <span className="arrow">→</span>
              </button>
            </form>
          }
        </Reveal>
      </div>
    </section>);

}

/* ────── Pre-footer CTA ────── */
function CTABlock({ t, onCTA }) {
  return (
    <section className="cta">
      <Reveal className="container">
        <h2>{t.cta_block?.title || (t.lang === "en" ? "Let's build something that lasts." : "Construyamos algo que perdure.")}</h2>
        <p className="lead">
          {t.lang === "en" ?
          "Talk to the team to learn about active deals or to discuss your succession." :
          "Habla con el equipo para conocer deals activos o explorar tu sucesión."}
        </p>
        <div className="cta__buttons">
          <button className="btn" onClick={() => onCTA("contact")}>{t.cta.contact} <span className="arrow">→</span></button>
        </div>
      </Reveal>
    </section>);

}

Object.assign(window, {
  Hero, Tesis, Modelo, Enfoque, Pilares, Proceso, Comparativa,
  Portfolio, Equipo, Contacto, CTABlock, Reveal, useReveal
});