/* global React, OnboardingCarousel, FAQSection, CTASection */

function VariationB({ t, lang }) {
  return (
    <div className="dm-page" data-variant="B">
      {/* HERO — left-aligned, large type, mockup floats right with surround */}
      <section className="dm-section" style={{ paddingTop: 56, paddingBottom: 80, position: "relative", overflow: "hidden" }}>
        <div className="dm-container">
          <div className="dm-badge" style={{ marginBottom: 36 }}>
            <span className="dot"></span>
            {t.badge}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 380px", gap: 64, alignItems: "start" }} className="dm-hero-grid">
            <div>
              <h1 className="dm-serif" style={{ fontSize: "clamp(48px, 7vw, 92px)", lineHeight: 0.98, margin: "0 0 32px", letterSpacing: "-0.035em", fontWeight: 400 }}>
                {t.hero.h1.map((line, i) => (
                  <span key={i} style={{ display: "block" }}>{line}</span>
                ))}
              </h1>
              <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 40, marginTop: 48, alignItems: "end" }}>
                <p style={{ fontSize: 18, lineHeight: 1.55, color: "var(--ink-2)", margin: 0 }}>{t.hero.sub}</p>
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  <a href="#cta" className="dm-btn dm-btn-primary" style={{ justifyContent: "center" }}>{t.hero.ctaPrimary}<span className="dm-btn-arrow"></span></a>
                  <a href="#how" className="dm-btn dm-btn-ghost" style={{ justifyContent: "center" }}>{t.hero.ctaSecondary}</a>
                </div>
              </div>
            </div>
            <div>
              <window.OnboardingCarousel width={320} />
            </div>
          </div>
          <div style={{ marginTop: 64, paddingTop: 24, borderTop: "1px solid var(--line-soft)", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }} className="dm-meta-grid">
            {[
              { k: lang === "es" ? "Latencia objetivo" : "Target latency", v: "< 30 s" },
              { k: lang === "es" ? "Plataforma" : "Platform", v: "iOS · Android" },
              { k: lang === "es" ? "Hospedaje" : "Hosting", v: lang === "es" ? "Unión Europea" : "European Union" },
              { k: lang === "es" ? "Cumplimiento" : "Compliance", v: "GDPR · LOPDGDD" }
            ].map((m, i) => (
              <div key={i}>
                <div className="dm-mono" style={{ marginBottom: 6 }}>{m.k}</div>
                <div className="dm-serif" style={{ fontSize: 22, letterSpacing: "-0.01em" }}>{m.v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* HOW IT WORKS — vertical numbered grid with cards */}
      <section id="how" className="dm-section" style={{ paddingBlock: 96, background: "var(--ink)", color: "var(--bg)" }}>
        <div className="dm-container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 48, gap: 32, flexWrap: "wrap" }}>
            <div>
              <div className="dm-mono" style={{ color: "var(--accent)", marginBottom: 12 }}>{t.sectionLabels.how}</div>
              <h2 className="dm-serif" style={{ fontSize: "clamp(36px, 5vw, 56px)", lineHeight: 1.05, margin: 0, letterSpacing: "-0.025em", fontWeight: 400, maxWidth: 720 }}>
                {t.how.title}
              </h2>
            </div>
            <p style={{ fontSize: 16, color: "var(--muted-2)", maxWidth: 320, margin: 0, lineHeight: 1.55 }}>{t.how.lead}</p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="dm-how-grid">
            {t.how.steps.map((s, i) => (
              <div key={i} style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 16, padding: "32px 28px", display: "flex", flexDirection: "column", gap: 16, minHeight: 280 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span className="dm-mono" style={{ color: "var(--accent)", fontSize: 12 }}>{s.n}</span>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" style={{ opacity: 0.4 }}>
                    <path d={i === 0 ? "M12 4v16M8 8a4 4 0 0 1 8 0v6a4 4 0 0 1-8 0z" : i === 1 ? "M4 6h16M4 12h10M4 18h16" : "M16 8l-4 4-4-4M12 12v8M4 4h16"} />
                  </svg>
                </div>
                <h3 className="dm-serif" style={{ fontSize: 28, margin: 0, lineHeight: 1.15, letterSpacing: "-0.015em", fontWeight: 400, color: "var(--bg)" }}>{s.title}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6, color: "var(--muted-2)", margin: 0, flex: 1 }}>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PRODUCT — full-bleed band with sample report */}
      <section id="product" className="dm-section" style={{ paddingBlock: 96, background: "var(--bg-elev)" }}>
        <div className="dm-container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }} className="dm-hero-grid">
            <div>
              <div className="dm-eyebrow" style={{ marginBottom: 16 }}>{t.sectionLabels.product}</div>
              <h2 className="dm-serif" style={{ fontSize: "clamp(34px, 4.5vw, 52px)", lineHeight: 1.05, margin: "0 0 24px", letterSpacing: "-0.025em", fontWeight: 400 }}>
                {t.product.title}
              </h2>
              <p style={{ fontSize: 17, color: "var(--ink-2)", lineHeight: 1.6, margin: "0 0 32px", maxWidth: 480 }}>{t.product.lead}</p>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, maxWidth: 460 }}>
                {[
                  { es: "Castellano", en: "Castilian", v: true },
                  { es: "Catalán", en: "Catalan", v: false },
                  { es: "Gallego", en: "Galician", v: false },
                  { es: "Euskera", en: "Basque", v: false }
                ].map((r, i) => (
                  <div key={i} style={{ padding: "12px 14px", border: "1px solid var(--line)", borderRadius: 10, display: "flex", justifyContent: "space-between", alignItems: "center", background: r.v ? "var(--accent-soft)" : "var(--bg)" }}>
                    <span style={{ fontSize: 14, fontWeight: 500 }}>{r[lang]}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ background: "var(--bg-card)", border: "1px solid var(--line)", borderRadius: 20, padding: 32, boxShadow: "0 30px 60px -30px rgba(15, 29, 24, 0.15)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", paddingBottom: 16, borderBottom: "1px solid var(--line-soft)", marginBottom: 8 }}>
                <div>
                  <div className="dm-mono">{t.product.report.date}</div>
                  <div className="dm-serif" style={{ fontSize: 22, marginTop: 4, letterSpacing: "-0.01em" }}>{t.product.report.patient}</div>
                </div>
                <div className="dm-mono" style={{ alignSelf: "flex-end" }}>{t.product.report.duration}</div>
              </div>
              {t.product.report.sections.map((s, i) => (
                <div key={i} style={{ padding: "16px 0", borderBottom: i < t.product.report.sections.length - 1 ? "1px dashed var(--line-soft)" : "none" }}>
                  <div className="dm-mono" style={{ color: "var(--accent-ink)", marginBottom: 6 }}>{s.label}</div>
                  <div className="dm-serif" style={{ fontSize: 15, lineHeight: 1.55, color: "var(--ink-2)" }}>{s.body}</div>
                </div>
              ))}
              <div style={{ display: "flex", gap: 8, paddingTop: 16, marginTop: 8, borderTop: "1px solid var(--line-soft)" }}>
                <button className="dm-btn dm-btn-primary" style={{ padding: "8px 14px", fontSize: 13 }}>{lang === "es" ? "Copiar" : "Copy"}</button>
                <button className="dm-btn dm-btn-ghost" style={{ padding: "8px 14px", fontSize: 13 }}>DOCX</button>
                <button className="dm-btn dm-btn-ghost" style={{ padding: "8px 14px", fontSize: 13, marginLeft: "auto" }}>{lang === "es" ? "Editar" : "Edit"}</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TEMPLATES — doctors can upload their own report templates in-app */}
      <section id="templates" className="dm-section" style={{ paddingBlock: 96, background: "var(--bg)" }}>
        <div className="dm-container">
          <div className="dm-eyebrow" style={{ marginBottom: 16 }}>{t.sectionLabels.templates}</div>
          <h2 className="dm-serif" style={{ fontSize: "clamp(32px, 4vw, 48px)", lineHeight: 1.05, margin: "0 0 16px", letterSpacing: "-0.025em", fontWeight: 400, maxWidth: 720 }}>
            {t.templates.title}
          </h2>
          <p style={{ fontSize: 16, color: "var(--ink-2)", lineHeight: 1.6, margin: "0 0 48px", maxWidth: 620 }}>{t.templates.lead}</p>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 18 }} className="dm-templates-grid">
            {t.templates.items.map((tpl, i) => (
              <article key={i} style={{
                background: "var(--bg-elev)",
                border: "1px solid var(--line)",
                borderRadius: 16,
                padding: "26px 24px",
                display: "flex",
                flexDirection: "column",
                gap: 14,
                boxShadow: "0 10px 24px -16px rgba(15, 29, 24, 0.18), 0 2px 6px -2px rgba(15, 29, 24, 0.06)"
              }}>
                <h3 className="dm-serif" style={{ fontSize: 20, margin: 0, letterSpacing: "-0.015em", lineHeight: 1.2, fontWeight: 500, color: "var(--ink)" }}>
                  {tpl.name}
                </h3>
                <div style={{ height: 1, background: "var(--line-soft)", margin: "2px 0" }}></div>
                <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 6 }}>
                  {tpl.sections.map((s, j) => (
                    <li key={j} style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--mono)", fontSize: 12, color: "var(--ink-2)", letterSpacing: "0.03em" }}>
                      <span style={{ width: 4, height: 4, borderRadius: 999, background: "var(--accent)", flexShrink: 0 }}></span>
                      {s}
                    </li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* PRIVACY — horizontal scroller of pillars */}
      <section id="privacy" className="dm-section" style={{ paddingBlock: 96, background: "var(--bg-elev)" }}>
        <div className="dm-container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 48, gap: 32, flexWrap: "wrap" }}>
            <div>
              <div className="dm-eyebrow" style={{ marginBottom: 12 }}>{t.sectionLabels.privacy}</div>
              <h2 className="dm-serif" style={{ fontSize: "clamp(34px, 4.5vw, 52px)", lineHeight: 1.05, margin: 0, letterSpacing: "-0.025em", fontWeight: 400, maxWidth: 640 }}>
                {t.privacy.title}
              </h2>
            </div>
            <p style={{ fontSize: 16, color: "var(--muted)", maxWidth: 320, margin: 0, lineHeight: 1.55 }}>{t.privacy.lead}</p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }} className="dm-privacy-grid">
            {t.privacy.pillars.map((p, i) => (
              <div key={i} style={{ background: "var(--bg)", border: "1px solid var(--line-soft)", borderRadius: 16, padding: 28, minHeight: 240, display: "flex", flexDirection: "column" }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: "var(--accent-soft)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 20 }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent-ink)" strokeWidth="1.5">
                    {i === 0 && <><path d="M3 6l3-3h12l3 3v12l-3 3H6l-3-3z"/><path d="M9 12l2 2 4-4"/></>}
                    {i === 1 && <><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></>}
                    {i === 2 && <><rect x="4" y="6" width="16" height="14" rx="2"/><path d="M8 6V4a4 4 0 0 1 8 0v2"/></>}
                    {i === 3 && <><path d="M12 2l9 4v6c0 5-3.5 9-9 10-5.5-1-9-5-9-10V6z"/></>}
                  </svg>
                </div>
                <h3 className="dm-serif" style={{ fontSize: 22, margin: "0 0 10px", letterSpacing: "-0.01em", fontWeight: 500 }}>{p.label}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--muted)", margin: 0 }}>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FAQSection t={t} />
      <hr className="dm-rule" />
      <CTASection t={t} />
    </div>
  );
}

window.VariationB = VariationB;
