/* Marketing — main building blocks for index.html
 * Pivot: attorneys-only · solo + boutique · global · cross-border referrals
 */
const { useState, useEffect } = React;

function Nav() {
  return (
    <nav className="mk-nav">
      <div className="mk-nav-inner">
        <a href="/" className="mk-logo">ZINGERS</a>
        <div className="mk-nav-links">
          <a href="#how">How it works</a>
          <a href="#pricing">Pricing</a>
          <a href="/manifesto">Manifesto</a>
          <a href="/trust">Trust</a>
        </div>
        <a href="/apply" className="btn btn-primary" style={{padding:"10px 20px"}}>Apply</a>
      </div>
    </nav>
  );
}

function Hero({ headline }) {
  const headlines = {
    "who-you-know":  <>Where attorneys <em>refer attorneys</em>, across borders.</>,
    "the-room":      <>One curated <em>peer counsel</em>. Every week.</>,
    "matchcard":     <>A private bar — <em>by referral</em>, not by location.</>,
  };
  return (
    <section className="hero">
      <div className="mk-wrap hero-inner">
        <div>
          <div className="hero-eyebrow">FOUNDING COHORT · ATTORNEYS ONLY · 100 SPOTS</div>
          <h1>{headlines[headline] || headlines["who-you-know"]}</h1>
          <p className="hero-sub">
            ZINGERS is a private referral network for solo and boutique attorneys around the world. Every week, you meet one peer counsel who has a specific reason to refer you — the cross-border deal, the niche your firm doesn't take, the jurisdiction you'd otherwise pass on. No feeds. No pitches. No CLE marketing.
          </p>
          <div className="hero-cta">
            <a href="/apply" className="btn btn-primary">Apply — $49/month for founders</a>
            <a href="/manifesto" className="btn btn-ghost">Read the manifesto</a>
          </div>
          <div style={{marginTop:18, fontFamily:"var(--font-mono)", fontSize:11, color:"var(--text-muted)", letterSpacing:".1em"}}>
            EVERY APPLICATION READ BY AN ATTORNEY · 5–7 DAY RESPONSE
          </div>
        </div>
        <aside className="hero-aside">
          <div className="line"><span>FOR</span><span className="v">Solo + boutique attorneys</span></div>
          <div className="line"><span>FOUNDING SPOTS</span><span className="v">100</span></div>
          <div className="line"><span>FOUNDING PRICE</span><span className="v">$49/mo</span></div>
          <div className="line"><span>LOCKED FOR LIFE</span><span className="v">YES</span></div>
          <div className="line"><span>30-DAY GUARANTEE</span><span className="v">YES</span></div>
        </aside>
      </div>
    </section>
  );
}

function Marquee() {
  // Practice areas + jurisdictions — the language of the room
  const items = [
    "Cross-border M&A", "Estate planning", "International tax", "Tech / startup",
    "IP & trademarks", "Real estate", "Immigration", "Family law",
    "Litigation", "Privacy & data", "Banking & finance", "Employment",
  ];
  const row = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-row">
        {row.map((t, i) => (
          <React.Fragment key={i}>
            <span>{t}</span>
            <span className="dot">◆</span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function Manifesto() {
  const cells = [
    { tag: "01 · ONE A WEEK",       h: "One peer counsel a week.",                  b: "Our matching engine pairs you with one attorney who has a specific reason to refer you — a cross-border angle, a niche your firm doesn't take, a jurisdiction outside your bar admission. Scarcity is the product, not the marketing." },
    { tag: "02 · READ BY HUMAN",    h: "Every application is read end to end.",     b: "We don't gatekeep on the bar admission alone. Reviewers read every writing sample, every reported decision, every relevant link. Acceptance hovers near 19% — and most strong applicants hear 'not yet'." },
    { tag: "03 · CROSS-BORDER",     h: "Built for international practice.",         b: "The highest-value referral is the one a local network cannot make. NY counsel meets London counsel meets Tel Aviv counsel — because the deal already has all three." },
    { tag: "04 · TRANSPARENT",      h: "We tell you why every match.",              b: "Every introduction comes with the rationale, the practice-area overlap, the jurisdiction context, the mutuals you share. The algorithm isn't a black box and the curator's reasoning is part of the brief." },
    { tag: "05 · ALIGNED",          h: "Funded by member dues.",                    b: "No ad tier, no data resale, no enterprise upsell, no white-label to Big Law. If that ever changes, we close." },
    { tag: "06 · OUTCOMES",         h: "Closed deals, not engagement.",              b: "The north star is matters attributed to ZINGERS referrals. If you didn't open a file from a match in your first year, we didn't deliver." },
  ];
  return (
    <section className="manifesto mk-pad" id="how">
      <div className="mk-wrap">
        <div className="section-title">
          <div className="num">§ 01 · MANIFESTO</div>
          <div>
            <h2>Six commitments. <em>No fine print.</em></h2>
            <p className="lede">We don't make a feed. We don't sell your data. We don't grow until growth threatens the room. The full list of ten lives in the manifesto.</p>
          </div>
        </div>
        <div className="manifesto-grid">
          {cells.map((c, i) => (
            <div className="manifesto-cell" key={i}>
              <div className="tag">{c.tag}</div>
              <h3>{c.h}</h3>
              <p>{c.b}</p>
            </div>
          ))}
        </div>
        <div style={{textAlign:"center", marginTop:48}}>
          <a href="/manifesto" className="btn btn-ghost">Read all ten →</a>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: "01", h: "Apply with your work.",            b: "Five questions and two work samples — a memo, a published article, an opinion, a brief. A practicing attorney reads every application end to end. Decisions in 5–7 days." },
    { n: "02", h: "Activate your membership.",        b: "Approved? You'll get a payment link. $49/month for the founding 100, locked for life. 30-day money-back guarantee, no questions asked." },
    { n: "03", h: "Monday morning, you get a brief.", b: "One peer counsel, one paragraph of why, the practice-area and jurisdiction overlap, the mutuals you share. Accept, pass, or ask for a second look." },
    { n: "04", h: "We book the call. You take it.",   b: "If both sides accept, the calendar is on us. The first call is 30 minutes — bar to bar, not pitch to prospect." },
    { n: "05", h: "Log the outcome.",                 b: "Did it open a file, a co-counsel arrangement, a referral pipeline, or nothing yet? Three questions. Every answer sharpens next week's match." },
  ];
  return (
    <section className="mk-pad">
      <div className="mk-wrap">
        <div className="section-title">
          <div className="num">§ 02 · HOW IT WORKS</div>
          <div>
            <h2>Five steps, <em>weekly cadence</em>.</h2>
            <p className="lede">There is no app to live inside. One application, one Monday brief, one 30-minute call, one outcome log. Everything else is supporting infrastructure.</p>
          </div>
        </div>
        <div className="how-steps">
          {steps.map(s => (
            <div className="how-step" key={s.n}>
              <div className="num">STEP {s.n}</div>
              <h3>{s.h}</h3>
              <p>{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.MK = { Nav, Hero, Marquee, Manifesto, HowItWorks };