/* global React */

function WhyUs({ t }) {
  return (
    <section style={{ background: "#fff", padding: "120px 0 110px", borderTop: "1px solid var(--line)" }}>
      <div className="mx-auto px-6 lg:px-12" style={{ maxWidth: 1340 }}>
        <div className="grid lg:grid-cols-2 gap-16 items-start">
          <div className="reveal">
            <span className="eyebrow" style={{ color: "var(--terracotta)" }}>{t.whyEyebrow}</span>
            <h2 className="font-serif mt-4" style={{ fontSize: "clamp(2.1rem, 4vw, 3.5rem)", fontWeight: 500, lineHeight: 1.05, color: "var(--charcoal)" }}>{t.whyTitle}</h2>
            <p className="mt-6" style={{ color: "#5d574d", fontSize: "1.08rem", lineHeight: 1.7, maxWidth: 520 }}>{t.whyLead}</p>
            <div className="mt-9 flex items-center gap-3">
              <span className="rule-gold" />
              <span className="font-serif" style={{ fontStyle: "italic", color: "var(--burgundy)", fontSize: "1.05rem" }}>Lloret de Mar · Costa Brava</span>
            </div>
          </div>

          <div className="grid grid-cols-2 reveal" data-delay="2" style={{ border: "1px solid var(--line)" }}>
            {t.stats.map((s, i) => (
              <div key={i} style={{ padding: "38px 30px", borderRight: i % 2 === 0 ? "1px solid var(--line)" : "none", borderBottom: i < 2 ? "1px solid var(--line)" : "none" }}>
                <div className="font-serif" style={{ fontSize: "clamp(2.1rem, 3vw, 2.9rem)", color: "var(--burgundy)", fontWeight: 600, lineHeight: 1 }}>{s.n}</div>
                <div className="mt-2" style={{ fontSize: "0.82rem", color: "#5d574d", letterSpacing: "0.02em" }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* pillars */}
        <div className="grid md:grid-cols-3 gap-10 mt-24">
          {t.pillars.map((p, i) => (
            <div key={i} className="reveal" data-delay={i + 1}>
              <div className="flex items-center gap-3 mb-4">
                <span className="font-serif" style={{ color: "var(--gold)", fontSize: "1.1rem" }}>{String(i + 1).padStart(2, "0")}</span>
                <span style={{ flex: 1, height: 1, background: "var(--line)" }} />
              </div>
              <h3 className="font-serif" style={{ fontSize: "1.4rem", fontWeight: 500, color: "var(--charcoal)" }}>{p.t}</h3>
              <p className="mt-3" style={{ color: "#5d574d", fontSize: "0.98rem", lineHeight: 1.65 }}>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks({ t }) {
  return (
    <section style={{ background: "var(--burgundy)", color: "#fff", padding: "120px 0 120px", position: "relative", overflow: "hidden" }}>
      {/* subtle texture */}
      <div className="absolute inset-0" style={{ background: "radial-gradient(80% 60% at 80% 0%, rgba(201,169,97,0.16) 0%, transparent 60%)" }} />
      <div className="relative mx-auto px-6 lg:px-12" style={{ maxWidth: 1340 }}>
        <div className="max-w-2xl reveal">
          <span className="eyebrow" style={{ color: "var(--gold)" }}>{t.howEyebrow}</span>
          <h2 className="font-serif mt-4" style={{ fontSize: "clamp(2.1rem, 4vw, 3.5rem)", fontWeight: 500, lineHeight: 1.05, color: "#fff" }}>{t.howTitle}</h2>
          <p className="mt-6" style={{ color: "rgba(248,244,237,0.82)", fontSize: "1.08rem", lineHeight: 1.7 }}>{t.howLead}</p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px mt-20" style={{ background: "rgba(248,244,237,0.16)", border: "1px solid rgba(248,244,237,0.16)" }}>
          {t.steps.map((s, i) => (
            <div key={i} className="reveal" data-delay={i + 1} style={{ background: "var(--burgundy)", padding: "40px 30px 46px" }}>
              <div className="font-serif" style={{ color: "var(--gold)", fontSize: "3.2rem", lineHeight: 1, opacity: 0.9, fontWeight: 500 }}>{String(i + 1).padStart(2, "0")}</div>
              <h3 className="font-serif mt-5" style={{ fontSize: "1.32rem", fontWeight: 500, color: "#fff" }}>{s.t}</h3>
              <p className="mt-3" style={{ color: "rgba(248,244,237,0.78)", fontSize: "0.95rem", lineHeight: 1.6 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WhyUs, HowItWorks });