// ============================================================
// Richard Petrus — Bottom: Sobre, Testimonios, CTA, Footer
// ============================================================
/* global React, EditorialDivider, Photo, Stars, Arrow */

const { useEffect: _useEffect, useState: _useState } = React;

function Sobre({ t }) {
  return (
    <section id="sobre" className="rp-section">
      <EditorialDivider>{t.sobre.tag}</EditorialDivider>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.05fr)", gap: "clamp(40px, 5vw, 80px)", alignItems: "start" }} className="rp-2col">
        <div style={{ position: "relative" }}>
          <Photo caption="Richard Petrus · retrato editorial" ratio="3 / 4" />
          <div style={{
            position: "absolute",
            top: 16, right: 16,
            background: "rgba(10,10,11,0.7)",
            border: "1px solid var(--rp-border-strong)",
            padding: "8px 12px",
            borderRadius: 6
          }}>
            <span className="rp-mono" style={{ color: "var(--rp-bronze-light)" }}>Richard Petrus</span>
          </div>
        </div>
        <div>
          <h2 className="rp-h2" style={{ marginBottom: 28 }}>
            {t.sobre.h1}<br />
            {t.sobre.h2}<span className="rp-italic" style={{ color: "var(--rp-bronze-light)" }}>{t.sobre.h2i}</span>
          </h2>
          <p className="rp-dropcap" style={{ fontSize: 16, lineHeight: 1.75, color: "var(--rp-text-2)" }}>
            {t.sobre.pLead}{t.sobre.p}
          </p>
          <blockquote className="rp-pullquote">"{t.sobre.quote}"</blockquote>
          <div className="rp-pullquote-attr" style={{ marginBottom: 40 }}>{t.sobre.attr}</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, paddingTop: 28, borderTop: "1px solid var(--rp-border-2)" }}>
            {t.sobre.facts.map(([v, k], i) => (
              <div key={i}>
                <div style={{ fontFamily: "var(--rp-display)", fontSize: 38, lineHeight: 1, color: "var(--rp-bronze-light)" }}>{v}</div>
                <div className="rp-mono" style={{ color: "var(--rp-text-3)", marginTop: 6, lineHeight: 1.4 }}>{k}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonios({ t }) {
  return (
    <section className="rp-section" style={{ background: "var(--rp-bg-2)", maxWidth: "none", padding: "clamp(80px, 9vw, 140px) clamp(24px, 5vw, 72px)" }}>
      <div style={{ maxWidth: 1480, margin: "0 auto" }}>
        <EditorialDivider>{t.testimonios.tag}</EditorialDivider>
        <h2 className="rp-h2" style={{ marginBottom: 56, maxWidth: "22ch" }}>
          {t.testimonios.h1}<span className="rp-italic" style={{ color: "var(--rp-bronze-light)" }}>{t.testimonios.h1i}</span>{t.testimonios.h1b}
        </h2>
        <div className="rp-test-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {t.testimonios.items.map((it, i) => (
            <div key={i} className="rp-card" style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <Stars />
              <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--rp-text)" }}>"{it.q}"</p>
              <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 12, paddingTop: 18, borderTop: "1px solid var(--rp-border-2)" }}>
                <div style={{
                  width: 36, height: 36, borderRadius: "50%",
                  background: "linear-gradient(135deg, var(--rp-bronze-light), var(--rp-bronze-dark))",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  color: "#0A0A0B", fontSize: 13, fontWeight: 600
                }}>{it.n.charAt(0)}</div>
                <div>
                  <div style={{ fontSize: 13, color: "var(--rp-text)", fontWeight: 500 }}>{it.n}</div>
                  <div className="rp-mono" style={{ color: "var(--rp-text-3)" }}>{it.c}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1024px) { .rp-test-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 720px) { .rp-test-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function CTAFinal({ t }) {
  return (
    <section className="rp-section" style={{ position: "relative" }}>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.95fr) minmax(0, 1.05fr)", gap: "clamp(40px, 5vw, 80px)", alignItems: "center" }} className="rp-2col">
        <Photo caption="Editorial · Barcelona nocturna" ratio="5 / 6" />
        <div>
          <h2 className="rp-h2" style={{ marginBottom: 28 }}>
            {t.cta.h1}<br />
            <span className="rp-italic" style={{ color: "var(--rp-bronze-light)" }}>{t.cta.h2}</span>
          </h2>
          <p className="rp-lead" style={{ marginBottom: 36 }}>{t.cta.sub}</p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="#servicios" className="rp-btn rp-btn-primary">{t.cta.cta1} <Arrow /></a>
            <a href="#" className="rp-btn rp-btn-ghost">{t.cta.cta2}</a>
          </div>
          <div className="rp-mono" style={{ color: "var(--rp-text-3)", marginTop: 32, display: "flex", gap: 24, flexWrap: "wrap" }}>
            <span>· Entrega 48h</span>
            <span>· Bizum + Tarjeta</span>
            <span>· RGPD compliant</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer style={{ background: "var(--rp-bg-2)", borderTop: "1px solid var(--rp-border-2)", padding: "72px clamp(24px, 5vw, 72px) 32px" }}>
      <div style={{ maxWidth: 1480, margin: "0 auto" }}>
        <div className="rp-foot-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 48, marginBottom: 56 }}>
          <div>
            <div style={{ fontFamily: "var(--rp-display)", fontSize: 28, marginBottom: 6 }}>
              <span style={{ fontStyle: "italic" }}>Richard</span> Petrus
            </div>
            <div className="rp-mono" style={{ color: "var(--rp-text-3)", marginBottom: 18 }}>{t.footer.identitySub}</div>
            <a href="#" className="rp-mono" style={{ color: "var(--rp-bronze-light)" }}>{t.footer.ig}</a>
          </div>
          <FooterCol title={t.footer.navTitle} items={[t.nav.manifiesto, t.nav.metodo, t.nav.analisis, t.nav.servicios, t.nav.sobre]} />
          <FooterCol title={t.footer.contactTitle} items={[t.footer.contactEmail, t.footer.contactWa]} />
          <FooterCol title={t.footer.legalTitle} items={t.footer.legal} />
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 32, borderTop: "1px solid var(--rp-border-2)", flexWrap: "wrap", gap: 16 }}>
          <div className="rp-mono" style={{ color: "var(--rp-text-3)" }}>{t.footer.copy}</div>
          <div className="rp-mono" style={{ color: "var(--rp-text-3)" }}>{t.footer.powered}</div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .rp-foot-grid { grid-template-columns: 1fr 1fr !important; } }
      `}</style>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div className="rp-mono" style={{ color: "var(--rp-text-3)", marginBottom: 16 }}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10 }}>
        {items.map((it, i) => (
          <li key={i} style={{ fontSize: 13, color: "var(--rp-text-2)" }}>
            <a href="#" style={{ transition: "color 200ms ease" }} onMouseEnter={e => e.target.style.color = "var(--rp-bronze-light)"} onMouseLeave={e => e.target.style.color = ""}>{it}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

// ---------- FOMO push ----------
function FomoPush({ t }) {
  const [show, setShow] = _useState(false);
  const [item, setItem] = _useState(t.fomo[0]);

  _useEffect(() => {
    let i = 0;
    const cycle = () => {
      i = (i + 1) % t.fomo.length;
      setItem(t.fomo[i]);
      setShow(true);
      setTimeout(() => setShow(false), 4200);
    };
    const first = setTimeout(cycle, 8000);
    const interval = setInterval(cycle, 14000);
    return () => { clearTimeout(first); clearInterval(interval); };
  }, [t]);

  return (
    <div className={`rp-fomo ${show ? "show" : ""}`}>
      <div className="rp-fomo__dot" />
      <div className="rp-fomo__name">{item[0]} acaba de empezar</div>
      <div className="rp-fomo__plan">{item[1]}</div>
    </div>
  );
}

// ---------- WhatsApp float ----------
function WhatsApp() {
  return (
    <a className="rp-wa" href="#" aria-label="WhatsApp">
      <svg viewBox="0 0 32 32"><path d="M16 3C9 3 3 9 3 16c0 2.4.7 4.7 1.9 6.7L3 29l6.5-1.7c1.9 1 4.2 1.6 6.5 1.6 7 0 13-6 13-13S23 3 16 3zm0 24c-2 0-4-.5-5.7-1.5l-.4-.2-3.8 1 1-3.7-.3-.4C5.7 20.5 5 18.3 5 16 5 9.9 9.9 5 16 5s11 4.9 11 11-4.9 11-11 11zm6-7.3c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-.9 1.2-.2.2-.4.2-.7.1-.3-.2-1.3-.5-2.5-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.7.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.2-.7-1.7-1-2.4-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4s-1.1 1.1-1.1 2.6 1.1 3 1.3 3.2c.2.2 2.2 3.4 5.4 4.7 3.2 1.3 3.2.9 3.8.8.6-.1 1.8-.7 2-1.5.2-.7.2-1.4.2-1.5-.2-.1-.4-.2-.7-.4z"/></svg>
    </a>
  );
}

// ---------- Consent ----------
function Consent({ t }) {
  const [show, setShow] = _useState(false);
  _useEffect(() => {
    const seen = localStorage.getItem("rp-consent-v1");
    if (!seen) setTimeout(() => setShow(true), 1500);
  }, []);
  const dismiss = (v) => {
    localStorage.setItem("rp-consent-v1", v);
    setShow(false);
  };
  if (!show) return null;
  return (
    <div className="rp-consent">
      <div className="rp-consent__text">{t.consent.text}</div>
      <div className="rp-consent__actions">
        <button onClick={() => dismiss("reject")}>{t.consent.reject}</button>
        <button onClick={() => dismiss("custom")}>{t.consent.customize}</button>
        <button className="primary" onClick={() => dismiss("accept")}>{t.consent.accept}</button>
      </div>
    </div>
  );
}

Object.assign(window, { Sobre, Testimonios, CTAFinal, Footer, FomoPush, WhatsApp, Consent });