// ============================================================
// Richard Petrus — Top sections: Nav, Hero, Manifiesto, Método
// ============================================================
/* global React, BlurReveal, EditorialDivider, Aurora, Photo, Shiny, Stars, Arrow */

function Navbar({ t, lang, setLang }) {
  return (
    <nav className="rp-nav">
      <div className="rp-nav__logo">
        <span style={{ fontStyle: "italic" }}>Richard</span>
        <span style={{ fontWeight: 500 }}>Petrus</span>
        <span className="rp-nav__mono">Visagismo · BCN</span>
      </div>
      <div className="rp-nav__links">
        <a href="#manifiesto">{t.nav.manifiesto}</a>
        <a href="#metodo">{t.nav.metodo}</a>
        <a href="#analisis">{t.nav.analisis}</a>
        <a href="#servicios">{t.nav.servicios}</a>
        <a href="#sobre">{t.nav.sobre}</a>
      </div>
      <div className="rp-nav__right">
        <div className="rp-lang" role="group" aria-label="Idioma">
          <button className={lang === "es" ? "on" : ""} onClick={() => setLang("es")}>ES</button>
          <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
        </div>
        <a href="#servicios" className="rp-btn rp-btn-primary" style={{ padding: "12px 20px", fontSize: 13 }}>
          {t.nav.cta} <Arrow />
        </a>
      </div>
    </nav>
  );
}

function Hero({ t }) {
  return (
    <section className="rp-section rp-section--full" style={{ paddingTop: 64, paddingBottom: 96, position: "relative" }}>
      <Aurora />
      <div style={{
        position: "relative",
        zIndex: 2,
        maxWidth: 1480,
        margin: "0 auto",
        padding: "32px clamp(24px, 5vw, 72px) 0",
        display: "grid",
        gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 0.95fr)",
        gap: "clamp(40px, 5vw, 80px)",
        alignItems: "center"
      }} className="rp-hero-grid">
        <div>
          <div className="rp-mono" style={{ color: "var(--rp-bronze-light)", marginBottom: 28 }}>
            <span style={{ display: "inline-block", width: 28, height: 1, background: "currentColor", verticalAlign: "middle", marginRight: 12 }} />
            {t.hero.eyebrow}
          </div>
          <h1 className="rp-h1" style={{ marginBottom: 28 }}>
            <BlurReveal as="span">{t.hero.h1a}</BlurReveal>
            <br />
            <span className="rp-italic" style={{ color: "var(--rp-bronze-light)" }}>
              <BlurReveal as="span">{t.hero.h1b}</BlurReveal>
            </span>
          </h1>
          <p className="rp-lead" style={{ marginBottom: 36, maxWidth: "48ch" }}>{t.hero.sub}</p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 40 }}>
            <a href="#servicios" className="rp-btn rp-btn-primary">{t.hero.cta1} <Arrow /></a>
            <a href="#metodo" className="rp-btn rp-btn-ghost">{t.hero.cta2}</a>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 18, paddingTop: 28, borderTop: "1px solid var(--rp-border-2)", maxWidth: 520 }}>
            <Stars />
            <div>
              <div style={{ fontSize: 13, color: "var(--rp-text)", fontWeight: 500 }}>{t.hero.proof}</div>
              <div style={{ fontSize: 12, color: "var(--rp-text-3)", marginTop: 2 }}>{t.hero.proofSub}</div>
            </div>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <Photo caption="Richard Petrus · estudio · Barcelona" ratio="4 / 5" />
          <div className="rp-mono" style={{
            position: "absolute", bottom: -28, right: 0,
            color: "var(--rp-text-3)",
          }}>
            {t.hero.since}
          </div>
          <div style={{
            position: "absolute",
            top: -18, left: -18,
            background: "var(--rp-card)",
            border: "1px solid var(--rp-border)",
            borderRadius: 10,
            padding: "10px 14px",
            display: "flex",
            alignItems: "center",
            gap: 10,
            boxShadow: "0 20px 40px -20px rgba(0,0,0,0.6)"
          }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--rp-bronze-light)", boxShadow: "0 0 0 4px rgba(212,165,116,0.18)" }} />
            <span className="rp-mono" style={{ color: "var(--rp-text-2)" }}>48h · análisis listo</span>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .rp-hero-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function Manifiesto({ t }) {
  return (
    <section id="manifiesto" className="rp-section">
      <EditorialDivider>{t.manifiesto.tag}</EditorialDivider>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.5fr) minmax(0, 0.5fr)", gap: "clamp(40px, 5vw, 80px)", alignItems: "start" }} className="rp-2col">
        <h2 className="rp-h2">
          {t.manifiesto.h[0]}<br />
          {t.manifiesto.h[1]}<br />
          <span style={{ color: "var(--rp-text-2)" }}>{t.manifiesto.h[2]}</span>
          <span className="rp-italic" style={{ color: "var(--rp-bronze-light)" }}>{t.manifiesto.h[3]}</span>
        </h2>
        <div>
          <p className="rp-dropcap" style={{ fontSize: 16, lineHeight: 1.75, color: "var(--rp-text-2)", marginBottom: 0 }}>
            <span style={{ display: "none" }}>{t.manifiesto.pLead}</span>
            {t.manifiesto.pLead}{t.manifiesto.p}
          </p>
          <blockquote className="rp-pullquote">
            "{t.manifiesto.quote}"
          </blockquote>
          <div className="rp-pullquote-attr">{t.manifiesto.attr}</div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .rp-2col { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function Metodo({ t }) {
  return (
    <section id="metodo" 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.metodo.tag}</EditorialDivider>
        <h2 className="rp-h2" style={{ marginBottom: 64, maxWidth: "20ch" }}>
          {t.metodo.h1}<br />
          {t.metodo.h2}<br />
          <span className="rp-italic" style={{ color: "var(--rp-bronze-light)" }}>{t.metodo.h3}</span>
        </h2>
        <div style={{ position: "relative" }}>
          <div style={{ position: "absolute", left: 24, top: 8, bottom: 8, width: 1, background: "var(--rp-border)" }} />
          <div style={{ display: "grid", gap: 36 }}>
            {t.metodo.steps.map((step, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "64px minmax(0, 1fr)", gap: 24, alignItems: "start" }}>
                <div style={{
                  position: "relative",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  width: 48, height: 48,
                  borderRadius: 999,
                  background: "var(--rp-card)",
                  border: "1px solid var(--rp-border-strong)",
                  fontFamily: "var(--rp-mono)",
                  fontSize: 12,
                  letterSpacing: "0.12em",
                  color: "var(--rp-bronze-light)"
                }}>
                  {step.n}
                </div>
                <div style={{ paddingTop: 8, maxWidth: 720 }}>
                  <div style={{
                    fontFamily: "var(--rp-display)",
                    fontSize: "clamp(24px, 2.6vw, 34px)",
                    lineHeight: 1.1,
                    marginBottom: 10
                  }}>
                    {step.t}
                  </div>
                  <p className="rp-body">{step.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Navbar, Hero, Manifiesto, Metodo });