/* Marketing extras — Criteria, Numbers, Press, Pricing, FAQ, CTA, Footer */

function Criteria() {
  const items = [
    { h: "Senior solo or boutique", b: "5+ years in practice, firm of 1–8. Not for associates or large-firm partners." },
    { h: "Practice, not pedigree", b: "We don't check licenses or use referrals as votes. We read every application end to end — your work decides. 19% acceptance." },
    { h: "A book worth referring", b: "Specific niche, real client base, healthy turn-away list. We'll ask what you reject, not just what you take." },
    { h: "Posture, not polish", b: "We weigh the cover letter heavier than the LinkedIn. Show us how you think, not how you've been told to present." },
  ];
  return (
    <section className="mk-pad">
      <div className="mk-wrap">
        <div className="section-title">
          <div className="num">§ 03 · WHO WE ADMIT</div>
          <div>
            <h2>The four <em>questions</em> we ask.</h2>
            <p className="lede">Most people don't fit. That's the point. The bar is high so the room stays useful — not so we can be smug about it.</p>
          </div>
        </div>
        <div className="criteria-grid">
          {items.map((c, i) => (
            <div className="crit-item" key={i}>
              <div className="h"><div className="dot"></div><h4>{c.h}</h4></div>
              <p>{c.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Numbers() {
  const items = [
    { v: <em>100</em>, k: "Founding attorneys (spots)" },
    { v: <em>$49</em>, k: "Per month, locked for life" },
    { v: <em>1</em>, k: "Peer counsel a week" },
    { v: <em>30</em>, k: "Day money-back guarantee" },
  ];
  return (
    <section className="mk-pad-sm" style={{borderTop:"1px solid var(--border)", borderBottom:"1px solid var(--border)"}}>
      <div className="mk-wrap">
        <div className="numbers">
          {items.map((n, i) => (
            <div className="num-cell" key={i}>
              <div className="v">{n.v}</div>
              <div className="k">{n.k}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Press() {
  const items = [
    { src: "WHO IT'S FOR",   q: "Solo and boutique attorneys — anywhere in the world. Bar-admitted, five years in practice or more, with a real body of writing or reported decisions to read.",   w: "— Solo + boutique only" },
    { src: "WHO IT ISN'T",   q: "Associates at Big Law. Recent grads. In-house counsel. Non-attorneys. People who want a feed to scroll.",                                                          w: "— No exceptions" },
    { src: "WHAT YOU GET",   q: "One peer counsel a week with a written reason to meet — a cross-border deal, a niche your firm doesn't take, a jurisdiction you'd otherwise pass on. Private.",    w: "— 30-minute first call" },
    { src: "WHAT IT COSTS",  q: "$49/month for the founding 100, locked for life. 30-day money-back guarantee. After founding fills: $99/month. No upsells, no Big Law tier.",                       w: "— Funded by dues alone" },
  ];
  return (
    <section className="mk-pad">
      <div className="mk-wrap">
        <div className="section-title">
          <div className="num">§ 04 · WHAT THIS IS</div>
          <div>
            <h2>The plain <em>truth</em>.</h2>
            <p className="lede">Before you apply — what this is and who it's for, without the marketing varnish.</p>
          </div>
        </div>
        <div className="press">
          {items.map((p, i) => (
            <div className="press-card" key={i}>
              <div className="src">{p.src}</div>
              <blockquote>"{p.q}"</blockquote>
              <div className="who">{p.w}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  return (
    <section className="mk-pad" id="pricing" style={{background:"var(--bg-deep)", borderTop:"1px solid var(--border)", borderBottom:"1px solid var(--border)"}}>
      <div className="mk-wrap">
        <div className="section-title">
          <div className="num">§ 05 · PRICING</div>
          <div>
            <h2>One tier. One price. <em>Posted</em>.</h2>
            <p className="lede">No hidden enterprise upsell. No "book a demo to see pricing." If we ever need to raise dues, current members are grandfathered.</p>
          </div>
        </div>
        <div className="pricing-grid">
          <div className="crit-item pricing-card" style={{borderColor:"var(--accent)"}}>
            <div className="h"><div className="dot"></div><h4 style={{fontSize:18}}>FOUNDING · 100 ATTORNEYS</h4></div>
            <div className="pricing-amount" style={{color:"var(--accent)"}}>$49<span className="pricing-suffix"> / month</span></div>
            <p style={{marginTop:16}}>Annual: $490 (save two months). Locked for life — your price never rises. 30-day money-back guarantee.</p>
            <ul style={{listStyle:"none", padding:0, marginTop:24, display:"grid", gap:10, fontSize:14, color:"var(--text-secondary)"}}>
              <li>◆ One peer counsel match every Monday</li>
              <li>◆ Written brief with practice-area + jurisdiction context</li>
              <li>◆ Asks Board — post a need, get peer responses</li>
              <li>◆ Vetted directory of attorneys you've met</li>
              <li>◆ Founder access — direct line on any issue</li>
            </ul>
          </div>
          <div className="crit-item pricing-card">
            <div className="h"><div className="dot"></div><h4 style={{fontSize:18}}>STANDARD · AFTER FOUNDING</h4></div>
            <div className="pricing-amount" style={{color:"var(--text-primary)"}}>$99<span className="pricing-suffix"> / month</span></div>
            <p style={{marginTop:16}}>Annual: $990 (save two months). Once the founding 100 are filled, this becomes the standard rate. 30-day refund still applies.</p>
            <ul style={{listStyle:"none", padding:0, marginTop:24, display:"grid", gap:10, fontSize:14, color:"var(--text-secondary)"}}>
              <li>◆ All Founding benefits</li>
              <li>◆ Same product, different starting price</li>
              <li>◆ New attorneys added in cohorts to keep the bar high</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const rows = [
    { q: "Why attorneys only? Why not a broader network?",       a: "Because referrals are highest-value inside a single profession with shared vocabulary, ethics rules, and conflicts framework. A New York attorney + a London attorney share a primitive a financial planner can't reach. We picked the deepest single market." },
    { q: "How is this different from a state bar referral pool?", a: "Bar pools are open lists, locally scoped, with no fit logic. We're curated, global, and matched on practice area, jurisdiction, and the client profile you actually take. One match a week, not a directory dump." },
    { q: "What if I'm bar-admitted in multiple jurisdictions?",   a: "All of them get used in matching. The more jurisdictions you carry, the higher your cross-border match quality — particularly the international ones." },
    { q: "What about conflicts checks?",                          a: "Self-declared at intake and reinforced before each match. The brief shows you who you'd be talking with and the practice-area overlap before you accept. Pass with no friction if you spot a conflict." },
    { q: "Why $49 a month?",                                      a: "The founding 100 fund the build and earn a price locked for life. After the cohort fills, membership is $99/month. Annual saves two months either way." },
    { q: "Do I need to be referred by a current member?",         a: "No. Every application is read by a practicing attorney on our team. We accept on the work — writing samples, reported decisions, publications — not on who sent you." },
    { q: "How long until I hear back?",                           a: "5–7 days. We read every application end to end. Acceptance hovers near 19% — and a 'not yet' often means 'reapply in six months with new work.'" },
    { q: "What happens if you get acquired?",                     a: "Members are informed before close and offered a full refund of annual dues. Manifesto commitments bind any successor. We've codified this in the terms." },
  ];
  return (
    <section className="mk-pad">
      <div className="mk-wrap">
        <div className="section-title">
          <div className="num">§ 06 · QUESTIONS</div>
          <div>
            <h2>Asked, <em>answered</em>.</h2>
          </div>
        </div>
        <div>
          {rows.map((r, i) => (
            <div className="faq-row" key={i}>
              <div className="q">{r.q}</div>
              <div className="a">{r.a}</div>
            </div>
          ))}
        </div>
        <div style={{textAlign:"center", marginTop:32}}>
          <a href="/manifesto#refusals" className="btn btn-ghost">All objections, answered →</a>
        </div>
      </div>
    </section>
  );
}

function CtaBand() {
  return (
    <section className="cta-band mk-pad-sm">
      <div className="mk-wrap">
        <h2>One peer counsel a week. <em>$49/mo locked for life.</em></h2>
        <p className="sub">Five questions. Three minutes. A practicing attorney reads every application — you'll hear back in 5–7 days.</p>
        <div style={{display:"flex", justifyContent:"center", gap:16, flexWrap:"wrap"}}>
          <a href="/apply" className="btn btn-primary">Begin application →</a>
          <a href="/manifesto" className="btn btn-ghost">Read the manifesto first</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="mk-wrap">
        <div className="foot-grid">
          <div>
            <div className="mk-logo" style={{marginBottom:14}}>ZINGERS</div>
            <p style={{maxWidth:340, fontSize:14, color:"var(--text-secondary)", lineHeight:1.7}}>
              Where solo and boutique attorneys refer each other real client work across borders. One peer counsel a week.
            </p>
          </div>
          <div>
            <h5>Product</h5>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="#pricing">Pricing</a></li>
              <li><a href="/trust">Trust & safety</a></li>
            </ul>
          </div>
          <div>
            <h5>Read</h5>
            <ul>
              <li><a href="/manifesto">Manifesto</a></li>
              <li><a href="/apply">Apply</a></li>
            </ul>
          </div>
          <div>
            <h5>Members</h5>
            <ul>
              <li><a href="/app">Sign in</a></li>
              <li><a href="/sign-in">Magic link</a></li>
              <li><a href="/states">All states</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© 2026 ZINGERS · NEW YORK · AUSTIN · LONDON</div>
          <div>BUILT QUIETLY · NO ADS · NO TRACKING</div>
        </div>
      </div>
    </footer>
  );
}

window.MKE = { Criteria, Numbers, Press, Pricing, FAQ, CtaBand, Footer };