// PRICING · Free community + Plus

function Pricing() {
  const [showAssessment, setShowAssessment] = React.useState(false);
  return (
    <section className="section paper rule-top" id="pricing">
      <div className="page">
        <div className="grid-12" style={{ alignItems: "end", marginBottom: 48 }}>
          <div style={{ gridColumn: "span 7" }}>
            <span className="eyebrow">Membership</span>
            <h2 className="h-section" style={{ marginTop: 16, color: "var(--bg-paper-ink)" }}>
              Start free.<br/>
              Go <em style={{ color: "var(--gold-deep)" }}>Plus</em> when you're ready.
            </h2>
          </div>
          <div style={{ gridColumn: "9 / span 4" }}>
            <p className="lede">
              ★ Not a course. A community with tools. Join free first, upgrade when you want to.
            </p>
          </div>
        </div>

        <div className="assessment-prompt-inner" style={{ background: "var(--bg-paper)", border: "1px solid rgba(24,19,12,0.12)", marginBottom: 48 }}>
          <div>
            <span className="caption" style={{ color: "rgba(24,19,12,0.55)" }}>Self-check</span>
            <h3 className="kicker" style={{ margin: "10px 0 8px", color: "var(--bg-paper-ink)" }}>Where are you in this funnel?</h3>
            <p className="body-text" style={{ fontSize: 16, lineHeight: 1.5, margin: 0, maxWidth: "48ch", color: "rgba(24,19,12,0.65)" }}>
              Three minutes. Beginner, intermediate, or advanced, so you know which parts of the map to read first.
            </p>
          </div>
          <button type="button" onClick={() => setShowAssessment(true)} className="btn btn-primary">
            Start assessment <Arrow />
          </button>
        </div>

        <div className="grid-12 pricing-tiers">
          <Tier
            name="Producer Union"
            price="Free"
            priceSub="forever on Skool"
            tag="START HERE"
            featured={false}
            href={PU_LINKS.free}
            features={[
              "Know what to quote before you're ever in the room",
              "Understand the business side before your first placement lands",
              "Get answers from producers who've done it",
              "13 years of hard lessons, free on YouTube",
            ]}
            cta="Join free"
            ctaSub="Free Skool community"
          />
          <Tier
            name="Producer Union Plus"
            price="$99"
            priceSub="/ month · cancel anytime"
            tag="THE PLAYBOOK"
            featured={true}
            href={PU_LINKS.plus}
            features={[
              "The Producer Roadmap, four phases, one chapter at a time",
              "Worksheets, templates, and step-by-step directions",
              "Weekly live calls, bring a real situation, get real advice",
              "Producer group chat with other Plus members",
            ]}
            cta="Start the Roadmap"
            ctaSub="Roadmap · worksheets · weekly calls · group chat"
          />
        </div>

        {showAssessment && <ProducerAssessment onClose={() => setShowAssessment(false)} />}

      </div>
    </section>
  );
}

function Tier({ name, price, priceSub, tag, featured, features, href, cta, ctaSub }) {
  return (
    <div
      className={`pricing-tier ${featured ? "pricing-tier-featured" : ""}`}
      style={{ gridColumn: "span 6" }}
    >
      {featured && <div className="pricing-tier-badge">MOST PRODUCERS JOIN PLUS</div>}
      <span className="pricing-tier-tag">{tag}</span>
      <h3 className="pricing-tier-name">{name}</h3>
      <div className="pricing-tier-price-row">
        <span className="pricing-tier-price">{price}</span>
        <span className="pricing-tier-price-sub">{priceSub}</span>
      </div>
      <ul className="pricing-tier-features">
        {features.map((f, i) => (
          <li key={i}>{f}</li>
        ))}
      </ul>
      <JoinCta
        href={href}
        variant={featured ? "primary" : "ghost"}
        block
        sub={ctaSub}
        className={featured ? "join-cta-tier-featured" : "join-cta-tier"}
      >
        {cta}
      </JoinCta>
    </div>
  );
}

window.Pricing = Pricing;