// Membership.jsx, Membership / pricing page

const Membership = ({ onNavigate }) => {
 const vp = useViewport();
 return (
  <div>
   <section style={{ padding: vp.isMobile ? "48px var(--pad-x)" : "64px var(--pad-x) 48px", borderBottom: "1px solid var(--color-border)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto", textAlign: "center" }}>
     <Eyebrow>Membership</Eyebrow>
     <h1 style={{ marginTop: 12, fontSize: vp.isMobile ? 32 : 48, lineHeight: 1.15, letterSpacing: "-0.02em", color: "var(--jv-navy-800)", maxWidth: 760, margin: "12px auto 0" }}>
      Two plans. One verified marketplace.
     </h1>
     <p style={{ marginTop: 16, fontSize: vp.isMobile ? 15 : 17, lineHeight: 1.55, color: "var(--color-fg-body)", maxWidth: 600, margin: "16px auto 0" }}>
      Pay for verification. Win serious inquiries from buyers who only talk to verified suppliers.
     </p>
    </div>
   </section>

   <section style={{ padding: vp.isMobile ? "48px var(--pad-x)" : "64px var(--pad-x)" }}>
    <div style={{ maxWidth: 960, margin: "0 auto" }}>
     <div style={{ display: "grid", gridTemplateColumns: vp.isMobile ? "1fr" : "repeat(2, 1fr)", gap: 16, alignItems: "stretch" }}>
      <PlanCard
       tier="Verified"
       eyebrow="Most chosen by suppliers"
       featured
       price="USD 100"
       priceNote="per month, billed annually"
       description="For exporters ready to win RFQs from Japanese importers. Full verification, premium placement, RFQ access."
       features={[
        "Verified supplier badge",
        "KYC + facility audit",
        "Unlimited product listings",
        "Priority placement in directory",
        "Access to inbound RFQ feed",
        "Quote response analytics",
        "Bank reference on profile",
        "Trade lanes & shipment history",
       ]}
       cta="Get verified"
      />

      <PlanCard
       tier="Trading Partner"
       eyebrow="For trading companies"
       price="USD 300"
       priceNote="per month, billed annually"
       description="For importers, distributors, and trading companies running deal flow on the platform."
       features={[
        "Everything in Verified",
        "Outbound lead access",
        "Bulk RFQ broadcast",
        "Multi-seat team accounts",
        "API access (read-only)",
        "Dedicated account manager",
        "JFTA tariff advisory",
        "Quarterly market brief",
       ]}
       cta="Contact sales"
      />
     </div>
    </div>
   </section>

   {/* COMPARISON TABLE */}
   <section style={{ padding: vp.isMobile ? "32px var(--pad-x) 72px" : "48px var(--pad-x) 96px" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
     <Eyebrow>Plan comparison</Eyebrow>
     <h2 style={{ marginTop: 12, marginBottom: 24, fontSize: vp.isMobile ? 22 : 28, color: "var(--jv-navy-800)" }}>Feature-by-feature.</h2>
     <div style={{ border: "1px solid var(--color-border)", borderRadius: 6, overflow: "hidden" }}>
      <div className="jv-x-scroll">
       <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14, minWidth: 560 }}>
        <thead style={{ background: "var(--jv-ink-50)" }}>
         <tr style={{ textAlign: "left", color: "var(--color-fg-muted)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500 }}>
          <th style={{ padding: "14px 18px", width: "50%" }}>Feature</th>
          <th style={{ padding: "14px 18px", textAlign: "center", background: "var(--jv-sand-50, #fbf8f1)" }}>Verified</th>
          <th style={{ padding: "14px 18px", textAlign: "center" }}>Trading Partner</th>
         </tr>
        </thead>
        <tbody>
         {[
          ["Company profile", true, true],
          ["Product listings", "Unlimited", "Unlimited"],
          ["Verification badge", true, true],
          ["KYC + facility audit", true, true],
          ["Priority directory placement", true, true],
          ["Inbound RFQ access", true, true],
          ["Outbound lead access", false, true],
          ["Bulk RFQ broadcast", false, true],
          ["Team seats", "3", "10"],
          ["API access (read-only)", false, true],
          ["Dedicated account manager", false, true],
          ["JFTA tariff advisory", false, true],
         ].map((row, i) => (
          <tr key={i} style={{ borderTop: "1px solid var(--color-divider)" }}>
           <td style={{ padding: "14px 18px", color: "var(--jv-navy-800)", fontWeight: 500 }}>{row[0]}</td>
           {row.slice(1).map((cell, j) => (
            <td key={j} style={{ padding: "14px 18px", textAlign: "center", background: j === 0 ? "var(--jv-sand-50, #fbf8f1)" : undefined, color: "var(--color-fg-body)" }}>
             {cell === true ? <Icon name="check" size={18} color="var(--jv-trust-600)"/> :
              cell === false ? <span style={{ color: "var(--jv-ink-300)" }}>-</span> :
              cell}
            </td>
           ))}
          </tr>
         ))}
        </tbody>
       </table>
      </div>
     </div>
    </div>
   </section>
  </div>
 );
};

const PlanCard = ({ tier, eyebrow, featured, price, priceNote, description, features, cta }) => (
 <div style={{
  background: "#fff",
  border: `1px solid ${featured ? "var(--jv-navy-800)" : "var(--color-border)"}`,
  borderTop: featured ? "2px solid var(--jv-accent-600)" : `1px solid var(--color-border)`,
  borderRadius: 6,
  padding: 28,
  display: "flex",
  flexDirection: "column",
  gap: 20,
  boxShadow: featured ? "0 4px 12px rgba(11,42,74,0.08), 0 1px 2px rgba(11,42,74,0.04)" : "none",
 }}>
  <div>
   <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
    <h3 style={{ fontSize: 18, color: "var(--jv-navy-800)", fontWeight: 600 }}>{tier}</h3>
    {featured && <StatusPill tone="danger">Recommended</StatusPill>}
   </div>
   <div style={{ marginTop: 4, fontSize: 12, color: "var(--color-fg-muted)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500 }}>{eyebrow}</div>
  </div>

  <div>
   <Mono style={{ fontSize: 32, color: "var(--jv-navy-800)", fontWeight: 600 }}>{price}</Mono>
   <div style={{ fontSize: 12, color: "var(--color-fg-muted)", marginTop: 4 }}>{priceNote}</div>
  </div>

  <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--color-fg-body)" }}>{description}</p>

  <Button variant={featured ? "primary" : "secondary"} size="lg">{cta}</Button>

  <div style={{ borderTop: "1px solid var(--color-divider)", paddingTop: 18 }}>
   <Eyebrow style={{ marginBottom: 12 }}>What's included</Eyebrow>
   <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
    {features.map(f => (
     <li key={f} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14, color: "var(--color-fg-body)" }}>
      <Icon name="check" size={16} color="var(--jv-trust-600)"/>
      {f}
     </li>
    ))}
   </ul>
  </div>
 </div>
);

Object.assign(window, { Membership });