// ============================================================
// Richard Petrus — Middle sections: Análisis, Ciencia, Servicios, Quote
// ============================================================
/* global React, EditorialDivider, Photo, Shiny, Stars, Arrow */

function Analisis({ t }) {
  return (
    <section id="analisis" className="rp-section">
      <EditorialDivider>{t.analisis.tag}</EditorialDivider>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)", gap: "clamp(48px, 6vw, 96px)", alignItems: "start" }} className="rp-2col">
        <div>
          <h2 className="rp-h2" style={{ marginBottom: 28 }}>
            {t.analisis.h1}<br />
            {t.analisis.h2}<span className="rp-italic" style={{ color: "var(--rp-bronze-light)" }}>{t.analisis.h2i}</span>
          </h2>
          <p className="rp-lead" style={{ marginBottom: 40 }}>{t.analisis.lead}</p>
          <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 22 }}>
            {t.analisis.blocks.map(([title, desc], i) => (
              <li key={i} style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 16, paddingBottom: 22, borderBottom: "1px solid var(--rp-border-2)" }}>
                <span className="rp-mono" style={{ color: "var(--rp-bronze-light)", paddingTop: 2 }}>
                  {String(i + 1).padStart(2, "0")}
                </span>
                <div>
                  <div style={{ fontSize: 15, color: "var(--rp-text)", fontWeight: 500, marginBottom: 4 }}>{title}</div>
                  <div className="rp-body" style={{ fontSize: 14 }}>{desc}</div>
                </div>
              </li>
            ))}
          </ol>
        </div>
        <div style={{ position: "sticky", top: 96 }}>
          <ReportPreview t={t} />
          <div style={{ marginTop: 32 }}>
            <a href="#servicios" className="rp-btn rp-btn-primary">{t.analisis.cta} <Arrow /></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function ReportPreview({ t }) {
  return (
    <div className="rp-card" style={{ padding: 0, overflow: "hidden" }}>
      <div style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        padding: "16px 22px",
        borderBottom: "1px solid var(--rp-border-2)",
        background: "var(--rp-card-2)"
      }}>
        <div style={{ display: "flex", gap: 8 }}>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "rgba(255,255,255,0.12)" }} />
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "rgba(255,255,255,0.12)" }} />
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--rp-bronze-light)" }} />
        </div>
        <span className="rp-mono" style={{ color: "var(--rp-text-3)" }}>{t.analisis.previewTitle}</span>
      </div>
      <div style={{ padding: "32px 28px" }}>
        <div className="rp-mono" style={{ color: "var(--rp-bronze-light)", marginBottom: 16 }}>{t.analisis.previewKicker}</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 24 }}>
          {/* tiny face diagram */}
          <div style={{ position: "relative" }}>
            <svg viewBox="0 0 120 160" style={{ width: "100%", height: "auto", display: "block" }}>
              <ellipse cx="60" cy="80" rx="42" ry="58" fill="none" stroke="var(--rp-bronze-light)" strokeWidth="1" opacity="0.85"/>
              <line x1="14" y1="48" x2="106" y2="48" stroke="var(--rp-bronze)" strokeDasharray="3 4" strokeWidth="0.8" />
              <line x1="14" y1="92" x2="106" y2="92" stroke="var(--rp-bronze)" strokeDasharray="3 4" strokeWidth="0.8" />
              <line x1="14" y1="138" x2="106" y2="138" stroke="var(--rp-bronze)" strokeDasharray="3 4" strokeWidth="0.8" />
              <text x="110" y="36" fontSize="6" fill="var(--rp-text-2)" fontFamily="var(--rp-mono)" textAnchor="end">T1</text>
              <text x="110" y="80" fontSize="6" fill="var(--rp-text-2)" fontFamily="var(--rp-mono)" textAnchor="end">T2</text>
              <text x="110" y="126" fontSize="6" fill="var(--rp-text-2)" fontFamily="var(--rp-mono)" textAnchor="end">T3</text>
              <circle cx="42" cy="68" r="1.5" fill="var(--rp-bronze-light)"/>
              <circle cx="78" cy="68" r="1.5" fill="var(--rp-bronze-light)"/>
              <path d="M48 110 Q60 116 72 110" stroke="var(--rp-bronze-light)" fill="none" strokeWidth="0.8"/>
            </svg>
            <div className="rp-mono" style={{ textAlign: "center", marginTop: 8, color: "var(--rp-text-3)", fontSize: 9 }}>
              Diagrama · ratio 33/32/34
            </div>
          </div>
          <div style={{ display: "grid", gap: 10 }}>
            {t.analisis.previewFields.map(([k, v], i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", borderBottom: "1px dashed var(--rp-border-2)", paddingBottom: 8 }}>
                <span className="rp-mono" style={{ color: "var(--rp-text-3)" }}>{k}</span>
                <span style={{ fontSize: 13, color: "var(--rp-text)", fontFamily: "var(--rp-mono)", letterSpacing: 0 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 24, paddingTop: 18, borderTop: "1px solid var(--rp-border-2)" }}>
          <span className="rp-mono" style={{ color: "var(--rp-text-3)" }}>{t.analisis.previewFoot}</span>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--rp-bronze-light)", boxShadow: "0 0 0 4px rgba(212,165,116,0.16)" }} />
        </div>
      </div>
    </div>
  );
}

function Ciencia({ 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.ciencia.tag}</EditorialDivider>
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.9fr) minmax(0, 1.1fr)", gap: "clamp(40px, 5vw, 80px)", alignItems: "center" }} className="rp-2col">
          <div style={{ position: "relative" }}>
            <Photo caption={t.ciencia.photoCaption} ratio="4 / 5" />
            <div className="rp-mono" style={{ position: "absolute", bottom: 16, left: 16, color: "var(--rp-bronze-light)", background: "rgba(10,10,11,0.7)", padding: "6px 10px", borderRadius: 4 }}>
              Hallawell · método 1985
            </div>
          </div>
          <div>
            <h2 className="rp-h2" style={{ marginBottom: 36 }}>
              {t.ciencia.h1}<br />
              {t.ciencia.h2}<span className="rp-italic" style={{ color: "var(--rp-bronze-light)" }}>{t.ciencia.h2i}</span>
            </h2>
            <p className="rp-body" style={{ marginBottom: 20, maxWidth: "60ch" }}>{t.ciencia.p1}</p>
            <p className="rp-body" style={{ marginBottom: 20, maxWidth: "60ch" }}>{t.ciencia.p2}</p>
            <p className="rp-body" style={{ maxWidth: "60ch" }}>{t.ciencia.p3}</p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 36 }}>
              {["7 formatos", "3 tercios", "Línea dominante", "10 bloques"].map((p, i) => (
                <span key={i} className="rp-mono" style={{
                  display: "inline-flex",
                  padding: "8px 14px",
                  border: "1px solid var(--rp-border)",
                  borderRadius: 999,
                  color: "var(--rp-text-2)",
                  background: "var(--rp-card)"
                }}>{p}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Servicios({ t }) {
  return (
    <section id="servicios" className="rp-section">
      <EditorialDivider>{t.servicios.tag}</EditorialDivider>
      <h2 className="rp-h2" style={{ marginBottom: 56, maxWidth: "18ch" }}>
        {t.servicios.h1}<br />
        <span className="rp-italic" style={{ color: "var(--rp-bronze-light)" }}>{t.servicios.h2}</span>
      </h2>
      <div className="rp-plans" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, alignItems: "stretch" }}>
        {t.servicios.plans.map((p, i) => (
          <PlanCard key={i} plan={p} featured={i === 1} vatLabel={t.servicios.vatLabel} />
        ))}
      </div>
      <style>{`
        @media (max-width: 1024px) {
          .rp-plans { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function PlanCard({ plan, featured, vatLabel }) {
  const Wrap = ({ children }) => featured
    ? <div className="rp-card rp-electric" style={{ position: "relative" }}>{children}</div>
    : <div className="rp-card">{children}</div>;

  return (
    <Wrap>
      {plan.badge && (
        <div style={{
          position: "absolute",
          top: -14, left: 28,
          background: "linear-gradient(135deg, var(--rp-bronze-light), var(--rp-bronze))",
          color: "#0A0A0B",
          fontFamily: "var(--rp-mono)",
          fontSize: 10,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          padding: "6px 12px",
          borderRadius: 999,
          fontWeight: 600
        }}>
          ★ {plan.badge}
        </div>
      )}
      <div className="rp-mono" style={{ color: "var(--rp-text-3)", marginBottom: 12 }}>
        Plan · {plan.slug}
      </div>
      <div style={{
        fontFamily: "var(--rp-display)",
        fontSize: 38,
        marginBottom: 10,
        letterSpacing: "-0.01em"
      }}>{plan.name}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 16 }}>
        <span style={{ fontFamily: "var(--rp-display)", fontSize: 64, lineHeight: 1, letterSpacing: "-0.02em" }}>
          <Shiny>€{plan.price}</Shiny>
        </span>
        <span className="rp-mono" style={{ color: "var(--rp-text-3)" }}>{vatLabel}</span>
      </div>
      <p style={{
        fontFamily: "var(--rp-display)",
        fontStyle: "italic",
        fontSize: 17,
        color: "var(--rp-text-2)",
        marginBottom: 28,
        lineHeight: 1.35
      }}>{plan.tag}</p>
      <ul style={{ listStyle: "none", padding: 0, margin: "0 0 32px", display: "grid", gap: 12 }}>
        {plan.features.map((f, i) => (
          <li key={i} style={{ display: "grid", gridTemplateColumns: "16px 1fr", gap: 12, fontSize: 14, color: "var(--rp-text-2)", lineHeight: 1.5 }}>
            <svg viewBox="0 0 16 16" style={{ width: 14, height: 14, marginTop: 4 }} fill="none">
              <path d="M3 8.5L6.5 12 13 5" stroke="var(--rp-bronze-light)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            <span>{f}</span>
          </li>
        ))}
      </ul>
      <a href="#" className={`rp-btn ${featured ? "rp-btn-primary" : "rp-btn-ghost"}`} style={{ width: "100%", justifyContent: "center" }}>
        {plan.cta} <Arrow />
      </a>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--rp-border-2)", justifyContent: "center" }}>
        <Stars />
        <span className="rp-mono" style={{ color: "var(--rp-text-3)" }}>Pago seguro · Bizum · Tarjeta</span>
      </div>
    </Wrap>
  );
}

function QuoteDivider({ t }) {
  return (
    <section className="rp-section" style={{ paddingTop: "clamp(60px, 7vw, 100px)", paddingBottom: "clamp(60px, 7vw, 100px)", textAlign: "center", position: "relative" }}>
      <div style={{ maxWidth: 880, margin: "0 auto", position: "relative", zIndex: 2 }}>
        <div style={{ width: 36, height: 1, background: "var(--rp-bronze-light)", margin: "0 auto 36px" }} />
        <p className="rp-display" style={{ fontStyle: "italic", fontSize: "clamp(28px, 4.2vw, 56px)", lineHeight: 1.2, color: "var(--rp-text)" }}>
          "{t.quote.a}<br />
          <span style={{ color: "var(--rp-bronze-light)" }}>{t.quote.b}"</span>
        </p>
        <div className="rp-mono" style={{ color: "var(--rp-text-3)", marginTop: 28 }}>— {t.quote.attr}</div>
      </div>
    </section>
  );
}

Object.assign(window, { Analisis, Ciencia, Servicios, QuoteDivider });