// For Realtors page — strategy engine deep dive

function RealtorsPage({ accent, wordmark }) {
  const accentColor = accent === "teal" ? "#2EBDBD" : "#E8573A";

  return (
    <React.Fragment>
      <PageHero
        eyebrow="FOR REALTORS"
        subtitle="Drop in a listing. Get back a complete go-to-market plan: a buyer-matched flyer, a pre-listing deck, a 30-day social calendar, market intel, comparison graphics, and a teleprompter script. Every listing — a real strategy."
      >
        Every listing comes<br />
        with a <span className="hero-em">strategy.</span>
      </PageHero>

      {/* What's in a strategy — anatomy */}
      <section className="anatomy">
        <div className="anatomy-head">
          <div className="strip-eyebrow mono">ANATOMY OF A STRATEGY</div>
          <h2 className="strip-h2">Six artifacts. One listing. One click.</h2>
        </div>

        <div className="anatomy-grid">
          {/* row 1: flyer + pre-listing */}
          <div className="ana-card lg">
            <div className="ana-eyebrow mono">01 · BUYER-MATCHED FLYER</div>
            <div className="ana-title">The flyer, tuned to a specific buyer.</div>
            <div className="ana-vis flyer-vis">
              <div className="mini-flyer">
                <div className="mini-flyer-top" style={{ background: accentColor }}>
                  <div className="mono mini-eyebrow">FOR JENNA &amp; MARCUS</div>
                  <div className="mini-headline">Your first home.<br/>Walkable. Light-filled.</div>
                </div>
                <div className="mini-flyer-body">
                  <div className="mini-stat"><span className="mono">EST. MO</span><strong>$5,694</strong></div>
                  <div className="mini-stat"><span className="mono">BUDGET</span><strong>98%</strong></div>
                  <div className="mini-stat"><span className="mono">SCHOOLS</span><strong>9.1</strong></div>
                </div>
              </div>
            </div>
            <ul className="ana-list">
              <li>Pre-approval-aware (rate, max, cash to close)</li>
              <li>Buyer's must-haves matched to home features</li>
              <li>Realtor + LO co-brand auto-applied</li>
            </ul>
          </div>

          <div className="ana-card lg">
            <div className="ana-eyebrow mono">02 · PRE-LISTING DECK</div>
            <div className="ana-title">An 8-page deck for the seller meeting.</div>
            <div className="ana-vis deck-vis">
              <div className="deck-stack">
                {["CMA","MARKET","PLAN","TIMELINE","TEAM","PRICING","RESULTS","SIGN"].map((t, i) => (
                  <div key={t} className="deck-page" style={{ "--i": i }}>
                    <div className="mono">{t}</div>
                  </div>
                ))}
              </div>
            </div>
            <ul className="ana-list">
              <li>CMA + price-history + days-on-market built in</li>
              <li>Marketing plan + timeline pages, drag-to-reorder</li>
              <li>Print-ready PDF or interactive web link</li>
            </ul>
            <a href="#/prelisting" className="ana-link mono" style={{ color: accentColor }}>SEE ALL 8 PAGES →</a>
          </div>

          {/* row 2: social + market */}
          <div className="ana-card md">
            <div className="ana-eyebrow mono">03 · SOCIAL CALENDAR</div>
            <div className="ana-title">30 days of posts, queued.</div>
            <div className="ana-vis cal-vis">
              <div className="cal-grid">
                {Array.from({length:30}).map((_,i)=>{
                  const types = ["reel","carousel","story","reel","carousel"];
                  const t = types[i%5];
                  return <div key={i} className={`cal-cell ${t}`} title={t} />;
                })}
              </div>
              <div className="cal-legend mono">
                <span><i style={{background:accentColor}}/>REEL</span>
                <span><i style={{background:"#2EBDBD"}}/>CARO.</span>
                <span><i style={{background:"#E0D8D0"}}/>STORY</span>
              </div>
            </div>
          </div>

          <div className="ana-card md">
            <div className="ana-eyebrow mono">04 · MARKET INTEL</div>
            <div className="ana-title">What's selling. What's not.</div>
            <div className="ana-vis chart-vis">
              <svg viewBox="0 0 280 120" width="100%" height="120">
                <line x1="0" y1="100" x2="280" y2="100" stroke="#E0D8D0" />
                <line x1="0" y1="60" x2="280" y2="60" stroke="#F0EBE5" strokeDasharray="2 2" />
                <line x1="0" y1="20" x2="280" y2="20" stroke="#F0EBE5" strokeDasharray="2 2" />
                <polyline
                  points="0,80 30,72 60,75 90,60 120,55 150,42 180,48 210,30 240,28 280,18"
                  fill="none" stroke={accentColor} strokeWidth="2"
                />
                <polyline
                  points="0,80 30,72 60,75 90,60 120,55 150,42 180,48 210,30 240,28 280,18 280,120 0,120"
                  fill={accentColor} opacity="0.08"
                />
                <circle cx="180" cy="48" r="3" fill={accentColor} />
                <text x="186" y="42" fontSize="9" fill="#555" fontFamily="JetBrains Mono">$847K · YOUR LISTING</text>
              </svg>
              <div className="chart-stat-row mono">
                <span>NEIGHBORHOOD MEDIAN <strong>$789K</strong></span>
                <span>DOM <strong>21 DAYS</strong></span>
              </div>
            </div>
          </div>

          {/* row 3: graphics + teleprompter */}
          <div className="ana-card md">
            <div className="ana-eyebrow mono">05 · COMPARISON GRAPHICS</div>
            <div className="ana-title">This home vs. the neighborhood.</div>
            <div className="ana-vis bar-vis">
              {[
                { l: "PRICE/SQFT", a: 78, b: 58, suffix: "$436" },
                { l: "WALKABILITY", a: 92, b: 64, suffix: "92" },
                { l: "SCHOOL SCORE", a: 88, b: 71, suffix: "9.1" },
                { l: "LOT SIZE", a: 70, b: 50, suffix: "0.18AC" },
              ].map((b) => (
                <div key={b.l} className="bar-row">
                  <div className="bar-label mono">{b.l}</div>
                  <div className="bar-track">
                    <div className="bar-fill home" style={{ width: `${b.a}%`, background: accentColor }} />
                    <div className="bar-fill nbhd" style={{ width: `${b.b}%` }} />
                  </div>
                  <div className="bar-val mono">{b.suffix}</div>
                </div>
              ))}
              <div className="bar-legend mono">
                <span><i style={{ background: accentColor }} />THIS HOME</span>
                <span><i style={{ background: "#C8BFB6" }} />NEIGHBORHOOD AVG</span>
              </div>
            </div>
          </div>

          <div className="ana-card md">
            <div className="ana-eyebrow mono">06 · TELEPROMPTER</div>
            <div className="ana-title">The script you'll read on camera.</div>
            <div className="ana-vis prompter-vis">
              <div className="prompter-screen">
                <div className="prompter-text">
                  <div className="line dim">Hey, it's Maria.</div>
                  <div className="line bright">I'm standing in front of <em>412 Henderson</em> —</div>
                  <div className="line bright">three beds, two baths, and what I think is</div>
                  <div className="line bright">the <strong>best light</strong> on the block.</div>
                  <div className="line dim">For first-time buyers under $5,700/mo,</div>
                  <div className="line dim">this one pencils. Let me show you why.</div>
                </div>
                <div className="prompter-bar" style={{ background: accentColor }} />
              </div>
              <div className="prompter-controls mono">
                <span>00:24 / 01:12</span>
                <span>WPM 120</span>
                <span className="rec"><span className="rec-dot"/> READY</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* The flow */}
      <section className="flow-section">
        <div className="strip-head">
          <div className="strip-eyebrow mono">THE FLOW</div>
          <h2 className="strip-h2">Listing in. Strategy out. Three steps.</h2>
        </div>
        <div className="flow-steps">
          <div className="flow-step">
            <div className="flow-step-n mono">01</div>
            <h3>Drop a listing</h3>
            <p>MLS link, address, or paste any listing URL. Lola pulls photos, specs, and price history.</p>
          </div>
          <div className="flow-arrow" aria-hidden="true">→</div>
          <div className="flow-step">
            <div className="flow-step-n mono">02</div>
            <h3>Pick the audience</h3>
            <p>A specific buyer, the listing owner, the open-house list, or your full SOI — Lola tailors everything.</p>
          </div>
          <div className="flow-arrow" aria-hidden="true">→</div>
          <div className="flow-step">
            <div className="flow-step-n mono">03</div>
            <h3>Send the strategy</h3>
            <p>Flyer, deck, posts, script — all on your brand, ready to text, post, present, or print.</p>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="page-cta">
        <div className="page-cta-inner">
          <h2>Win the listing. Run the campaign.</h2>
          <p>Be the first to ship a strategy with every listing you take.</p>
          <Waitlist accent={accent} />
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { RealtorsPage });