// PricingPage — performance-based for SES, custom-quoted for Voice.
// Composes: Nav → Hero → Two product pricing cards → Why we price this way → FAQ → FooterCTA → Footer

function PricingHero({ t }) {
  return (
    <section data-screen-label="pricing-hero" style={{
      position: "relative",
      background: "var(--bg-ink)",
      color: "var(--fg-cream)",
      overflow: "hidden",
      padding: "120px 0 80px",
      borderBottom: "1px solid var(--border-dark)"
    }}>
      {/* halo */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: "-100px -200px 0",
        background: "radial-gradient(40% 60% at 50% 0%, rgba(155, 201, 210, 0.28), transparent 70%)",
        filter: "blur(40px)", pointerEvents: "none"
      }} />

      <div className="container" style={{ position: "relative", maxWidth: 1000, textAlign: "center" }}>
        <div className="eyebrow" style={{ color: "var(--accent-teal)", justifyContent: "center" }}>
          {t.hero.eyebrow}
        </div>
        <h1 className="display-tight" style={{
          fontSize: "clamp(44px, 6vw, 86px)",
          margin: "20px auto 24px",
          color: "var(--fg-cream)",
          maxWidth: "16ch"
        }}>
          {t.hero.h1Pre} <span style={{ color: "var(--accent-teal)" }}>{t.hero.h1Accent}</span>
        </h1>
        <p style={{
          fontSize: 19, lineHeight: 1.55, color: "var(--muted-cream)",
          maxWidth: "62ch", margin: "0 auto"
        }}>
          {t.hero.sub}
        </p>
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// PRICING CARDS — two side-by-side
// ---------------------------------------------------------------------------
function PricingCards({ t }) {
  return (
    <section data-screen-label="pricing-cards" style={{
      background: "var(--bg-cream)",
      padding: "100px 0 100px"
    }}>
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
          gap: 22
        }} id="pricing-grid">
          <SESPricingCard data={t.ses} />
          <VoicePricingCard data={t.voice} />
        </div>
      </div>
      <style>{`
        @media (max-width: 1024px) {
          #pricing-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// SES — light card with slate-teal trial frame
function SESPricingCard({ data }) {
  const accent = "#5B9EAD";
  return (
    <div style={{
      position: "relative",
      background: "var(--bg-white)",
      border: "1px solid var(--border-light)",
      borderRadius: 24,
      padding: "36px 36px 32px",
      overflow: "hidden",
      display: "flex", flexDirection: "column"
    }}>
      {/* corner glow */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: "radial-gradient(45% 50% at 92% 8%, rgba(155, 201, 210, 0.20), transparent 70%)"
      }} />

      <div style={{ position: "relative", zIndex: 2 }}>
        <div className="eyebrow" style={{ color: "var(--muted-ink)" }}>{data.eyebrow}</div>
        <div className="display-tight" style={{
          fontSize: "clamp(32px, 3.6vw, 44px)", fontWeight: 700,
          margin: "18px 0 12px", maxWidth: "20ch"
        }}>
          {data.title}
        </div>
        <p style={{ fontSize: 15.5, color: "var(--muted-ink)", lineHeight: 1.5, margin: 0, maxWidth: "42ch" }}>
          {data.kicker}
        </p>

        {/* big price block */}
        <div style={{
          marginTop: 28, padding: "26px 24px",
          background: "var(--bg-cream)",
          border: `1px solid ${accent}33`,
          borderRadius: 18
        }}>
          <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.16em", color: "var(--muted-ink)", textTransform: "uppercase", fontWeight: 600 }}>
            {data.priceLabel}
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginTop: 10 }}>
            <span className="display" style={{
              fontSize: "clamp(48px, 5vw, 64px)", fontWeight: 700,
              letterSpacing: "-0.045em", color: accent, lineHeight: 1
            }}>
              {data.priceBig}
            </span>
            <span style={{ fontSize: 14, color: "var(--muted-ink)" }}>{data.priceUnit}</span>
          </div>
          <div style={{
            marginTop: 18, paddingTop: 16,
            borderTop: "1px solid var(--border-light)"
          }}>
            <div style={{ fontSize: 14, color: "var(--fg-ink)", fontWeight: 500 }}>
              {data.range}
            </div>
            <div style={{ fontSize: 12.5, color: "var(--muted-ink)", marginTop: 4 }}>
              {data.rangeSub}
            </div>
          </div>
        </div>

        {/* trial frame */}
        <div style={{
          marginTop: 18,
          background: accent,
          color: "white",
          padding: "20px 22px",
          borderRadius: 16,
          position: "relative",
          overflow: "hidden"
        }}>
          <div style={{
            position: "absolute", top: -30, right: -30,
            width: 140, height: 140, borderRadius: 999,
            background: "rgba(255,255,255,0.10)"
          }} />
          <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.18em", fontWeight: 700, opacity: 0.85 }}>
            {data.trial.label}
          </div>
          <div style={{ fontSize: 14.5, lineHeight: 1.5, marginTop: 8, position: "relative" }}>
            {data.trial.body}
          </div>
        </div>

        {/* included list */}
        <div style={{ marginTop: 22 }}>
          <div className="mono" style={{
            fontSize: 10, letterSpacing: "0.18em",
            color: "var(--muted-ink)", marginBottom: 12, fontWeight: 600
          }}>
            INCLUDED
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
            {data.included.map((item, i) => (
              <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, lineHeight: 1.45 }}>
                <span style={{
                  flex: "none", marginTop: 2,
                  width: 17, height: 17, borderRadius: 999,
                  background: `${accent}22`, color: accent,
                  display: "grid", placeItems: "center"
                }}>
                  <Icon.Check size={10} />
                </span>
                <span style={{ color: "var(--fg-ink)" }}>{item}</span>
              </li>
            ))}
          </ul>
        </div>

        {/* bottom line */}
        <div style={{
          marginTop: 22, padding: "16px 18px",
          background: "var(--bg-cream)",
          border: "1px solid var(--border-light)",
          borderRadius: 12
        }}>
          <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--muted-ink)", fontWeight: 700 }}>
            {data.bottomLine.label}
          </div>
          <div style={{ fontSize: 13.5, color: "var(--fg-ink)", lineHeight: 1.5, marginTop: 6 }}>
            {data.bottomLine.body}
          </div>
        </div>

        {/* CTA */}
        <div style={{ marginTop: 28 }}>
          <a href="#book" className="btn" style={{
            fontSize: 15, padding: "13px 22px",
            background: accent, color: "white", fontWeight: 600,
            width: "100%", justifyContent: "center"
          }}>
            {data.cta} <Icon.Arrow size={14} />
          </a>
        </div>
      </div>
    </div>
  );
}

// Voice — dark card, "let's talk" framing
function VoicePricingCard({ data }) {
  return (
    <div style={{
      position: "relative",
      background: "var(--bg-ink)",
      color: "var(--fg-cream)",
      border: "1px solid var(--border-dark)",
      borderRadius: 24,
      padding: "36px 36px 32px",
      overflow: "hidden",
      display: "flex", flexDirection: "column"
    }}>
      {/* corner glow */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: "radial-gradient(50% 50% at 92% 8%, rgba(155, 201, 210, 0.18), transparent 70%)"
      }} />

      <div style={{ position: "relative", zIndex: 2 }}>
        <div className="eyebrow" style={{ color: "var(--accent-teal)" }}>{data.eyebrow}</div>
        <div className="display-tight" style={{
          fontSize: "clamp(32px, 3.6vw, 44px)", fontWeight: 700,
          margin: "18px 0 12px", maxWidth: "20ch", color: "var(--fg-cream)"
        }}>
          {data.title}
        </div>
        <p style={{ fontSize: 15.5, color: "var(--muted-cream)", lineHeight: 1.5, margin: 0, maxWidth: "44ch" }}>
          {data.kicker}
        </p>

        {/* big price block */}
        <div style={{
          marginTop: 28, padding: "26px 24px",
          background: "rgba(255,255,255,0.03)",
          border: "1px solid rgba(155, 201, 210, 0.20)",
          borderRadius: 18
        }}>
          <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.16em", color: "var(--muted-cream)", textTransform: "uppercase", fontWeight: 600 }}>
            {data.priceLabel}
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginTop: 10 }}>
            <span className="display" style={{
              fontSize: "clamp(40px, 4.5vw, 58px)", fontWeight: 700,
              letterSpacing: "-0.04em", color: "var(--accent-teal)", lineHeight: 1
            }}>
              {data.priceBig}
            </span>
            <span style={{ fontSize: 14, color: "var(--muted-cream)" }}>{data.priceUnit}</span>
          </div>
          <p style={{
            marginTop: 16, paddingTop: 14,
            borderTop: "1px solid var(--border-dark)",
            fontSize: 13.5, color: "var(--muted-cream)", lineHeight: 1.5
          }}>
            {data.body}
          </p>
        </div>

        {/* pricing factors grid */}
        <div style={{ marginTop: 18 }}>
          <div className="mono" style={{
            fontSize: 10, letterSpacing: "0.18em",
            color: "var(--muted-cream)", marginBottom: 12, fontWeight: 600
          }}>
            WHAT WE SIZE TO
          </div>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(2, 1fr)",
            gap: 10
          }} id="vp-factors">
            {data.factors.map((f, i) => (
              <div key={i} style={{
                padding: "12px 14px",
                background: "rgba(255,255,255,0.025)",
                border: "1px solid var(--border-dark)",
                borderRadius: 10
              }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: "var(--fg-cream)", letterSpacing: "-0.005em" }}>
                  {f.label}
                </div>
                <div style={{ fontSize: 11.5, color: "var(--muted-cream)", marginTop: 4, lineHeight: 1.45 }}>
                  {f.detail}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* included list */}
        <div style={{ marginTop: 22 }}>
          <div className="mono" style={{
            fontSize: 10, letterSpacing: "0.18em",
            color: "var(--muted-cream)", marginBottom: 12, fontWeight: 600
          }}>
            INCLUDED
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
            {data.included.map((item, i) => (
              <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, lineHeight: 1.45 }}>
                <span style={{
                  flex: "none", marginTop: 2,
                  width: 17, height: 17, borderRadius: 999,
                  background: "rgba(155, 201, 210, 0.18)", color: "var(--accent-teal)",
                  display: "grid", placeItems: "center"
                }}>
                  <Icon.Check size={10} />
                </span>
                <span style={{ color: "var(--fg-cream)" }}>{item}</span>
              </li>
            ))}
          </ul>
        </div>

        {/* bottom line */}
        <div style={{
          marginTop: 22, padding: "16px 18px",
          background: "rgba(255,255,255,0.03)",
          border: "1px solid var(--border-dark)",
          borderRadius: 12
        }}>
          <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--muted-cream)", fontWeight: 700 }}>
            {data.bottomLine.label}
          </div>
          <div style={{ fontSize: 13.5, color: "var(--fg-cream)", lineHeight: 1.5, marginTop: 6 }}>
            {data.bottomLine.body}
          </div>
        </div>

        {/* CTA */}
        <div style={{ marginTop: 28 }}>
          <a href="#book" className="btn" style={{
            fontSize: 15, padding: "13px 22px",
            background: "var(--accent-teal)", color: "var(--fg-ink)", fontWeight: 600,
            width: "100%", justifyContent: "center"
          }}>
            {data.cta} <Icon.Arrow size={14} />
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 540px) {
          #vp-factors { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

// ---------------------------------------------------------------------------
// WHY WE PRICE THIS WAY
// ---------------------------------------------------------------------------
function PricingWhy({ t }) {
  const w = t.why;
  return (
    <section data-screen-label="pricing-why" style={{
      background: "var(--bg-ink)", color: "var(--fg-cream)",
      padding: "120px 0"
    }}>
      <div className="container">
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <div className="eyebrow" style={{ color: "var(--muted-cream)" }}>{w.eyebrow}</div>
          <h2 className="display-tight" style={{
            fontSize: "clamp(36px, 4.6vw, 56px)",
            margin: "18px 0 0", color: "var(--fg-cream)"
          }}>
            {w.h2Pre} <span style={{ color: "var(--accent-teal)" }}>{w.h2Accent}</span>
          </h2>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
          gap: 16
        }} id="why-grid">
          {w.items.map((item, i) => (
            <div key={i} style={{
              background: "rgba(255, 255, 255, 0.03)",
              border: "1px solid var(--border-dark)",
              borderRadius: 18,
              padding: "26px 26px",
              minHeight: 200,
              display: "flex", flexDirection: "column", gap: 12
            }}>
              <div className="display" style={{
                fontSize: 20, fontWeight: 600, letterSpacing: "-0.018em",
                color: "var(--fg-cream)"
              }}>
                {item.title}
              </div>
              <p style={{
                fontSize: 14.5, lineHeight: 1.55,
                color: "var(--muted-cream)", margin: 0
              }}>
                {item.body}
              </p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          #why-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ---------------------------------------------------------------------------
// PRICING FAQ (reuses the accordion style)
// ---------------------------------------------------------------------------
function PricingFAQ({ data }) {
  return (
    <section data-screen-label="pricing-faq" style={{ background: "var(--bg-cream)", padding: "120px 0" }}>
      <div className="container" style={{ maxWidth: 960 }}>
        <div style={{ marginBottom: 32 }}>
          <div className="eyebrow" style={{ color: "var(--muted-ink)" }}>{data.eyebrow}</div>
          <h2 className="display-tight" style={{ fontSize: "clamp(32px, 4vw, 48px)", margin: "16px 0 0" }}>
            {data.h2}
          </h2>
        </div>
        <div>
          {data.items.map((item, i) => (
            <details key={i} className="faq-item" {...(i === 0 ? { open: true } : {})}>
              <summary className="faq-summary">
                <span>{item.q}</span>
                <span className="faq-icon"><Icon.Plus size={14} /></span>
              </summary>
              <div className="faq-body">{item.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// PRICING-SPECIFIC FOOTER CTA
// ---------------------------------------------------------------------------
function PricingFooterCTA({ t }) {
  return (
    <section id="book" data-screen-label="pricing-cta" style={{
      background: "var(--bg-ink)",
      color: "var(--fg-cream)",
      padding: "120px 0",
      position: "relative",
      overflow: "hidden"
    }}>
      <div style={{
        position: "absolute", top: "-30%", left: "50%", transform: "translateX(-50%)",
        width: 900, height: 600,
        background: "radial-gradient(closest-side, rgba(155, 201, 210, 0.20), transparent 70%)",
        pointerEvents: "none"
      }} />
      <div className="container" style={{ position: "relative", maxWidth: 1040 }}>
        <div className="eyebrow" style={{ color: "var(--muted-cream)" }}>{t.eyebrow}</div>
        <h2 className="display-tight" style={{
          fontSize: "clamp(40px, 6vw, 78px)",
          margin: "22px 0 22px",
          color: "var(--fg-cream)",
          maxWidth: "18ch"
        }}>
          {t.h2Pre} <span style={{ color: "var(--accent-teal)" }}>{t.h2Accent}</span>
        </h2>
        <p style={{
          fontSize: 18, color: "var(--muted-cream)",
          lineHeight: 1.5, margin: 0, maxWidth: "62ch"
        }}>
          {t.sub}
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
          <a href="mailto:demo@sonaro.ai" className="btn" style={{
            fontSize: 15, padding: "13px 22px",
            background: "var(--accent-teal)", color: "var(--fg-ink)", fontWeight: 600
          }}>
            {t.cta} <Icon.Arrow size={14} />
          </a>
        </div>
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// PAGE ROOT
// ---------------------------------------------------------------------------
function PricingPage() {
  const lang = (typeof window !== "undefined" && window.__sonaroLang) || "en";
  const dict = (window.CONTENT && window.CONTENT[lang]) || window.CONTENT.en;
  const t = dict.pricingPage;
  return (
    <div id="top">
      <Nav t={dict} lang={lang} setLang={() => {}} />
      <PricingHero       t={t} />
      <PricingCards      t={t} />
      <PricingWhy        t={t} />
      <PricingFAQ        data={t.faq} />
      <PricingFooterCTA  t={t.footerCta} />
      <Footer            t={dict} />
    </div>
  );
}

Object.assign(window, { PricingPage });