// Strategy Engine page — social / market / seller / buyer / graphics / teleprompter

const STRAT_TABS = [
  { id: "social", label: "Social plan" },
  { id: "market", label: "Market intel" },
  { id: "seller", label: "Seller strategy" },
  { id: "buyer", label: "Buyer strategy" },
  { id: "graphics", label: "Graphics" },
  { id: "prompter", label: "Teleprompter" },
];

function SocialPlanPanel({ accent }) {
  const accentColor = accent === "teal" ? "#2EBDBD" : "#E8573A";
  const posts = [
    { d: 1, t: "Coming soon teaser", k: "story" },
    { d: 3, t: "Walkthrough reel", k: "reel" },
    { d: 5, t: "Light + lot carousel", k: "carousel" },
    { d: 7, t: "Open house countdown", k: "story" },
    { d: 9, t: "Neighborhood reel", k: "reel" },
    { d: 11, t: "Price psychology post", k: "carousel" },
    { d: 14, t: "Just listed broadcast", k: "reel" },
    { d: 17, t: "Buyer Q&A", k: "story" },
    { d: 20, t: "Comparable sales", k: "carousel" },
    { d: 24, t: "School + parks reel", k: "reel" },
    { d: 28, t: "Closing soon urgency", k: "story" },
  ];
  return (
    <div className="strat-panel social">
      <div className="strat-panel-h">
        <h3>30-day calendar, generated from this listing.</h3>
        <p>Lola plans the whole campaign — what to post, when to post it, and what to say.</p>
      </div>
      <div className="social-feed">
        {posts.map((p) => (
          <div key={p.d} className={`social-post ${p.k}`}>
            <div className="sp-day mono">DAY {p.d}</div>
            <div className="sp-thumb" style={p.k === "reel" ? { background: accentColor } : {}}>
              <span className="mono">{p.k.toUpperCase()}</span>
            </div>
            <div className="sp-title">{p.t}</div>
            <div className="sp-meta mono">SCHEDULED · 4:30PM</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function MarketIntelPanel({ accent }) {
  const accentColor = accent === "teal" ? "#2EBDBD" : "#E8573A";
  return (
    <div className="strat-panel market">
      <div className="strat-panel-h">
        <h3>Live market intel, written in plain English.</h3>
        <p>Pull a listing, and Lola writes you a brief on what's happening in the neighborhood right now.</p>
      </div>
      <div className="market-grid">
        <div className="mi-card big">
          <div className="mi-eyebrow mono">90-DAY TREND · 95124</div>
          <svg viewBox="0 0 400 160" width="100%" height="160">
            <defs>
              <linearGradient id="mi-g" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor={accentColor} stopOpacity="0.25"/>
                <stop offset="100%" stopColor={accentColor} stopOpacity="0"/>
              </linearGradient>
            </defs>
            <line x1="0" y1="140" x2="400" y2="140" stroke="#E0D8D0" />
            <polyline points="0,90 40,85 80,88 120,72 160,76 200,60 240,55 280,42 320,48 360,30 400,22"
              fill="none" stroke={accentColor} strokeWidth="2"/>
            <polyline points="0,90 40,85 80,88 120,72 160,76 200,60 240,55 280,42 320,48 360,30 400,22 400,160 0,160"
              fill="url(#mi-g)"/>
          </svg>
          <div className="mi-stats">
            <div><strong>+8.2%</strong><span className="mono">APPRECIATION</span></div>
            <div><strong>21d</strong><span className="mono">AVG DOM</span></div>
            <div><strong>97%</strong><span className="mono">LIST/SALE</span></div>
          </div>
        </div>
        <div className="mi-card">
          <div className="mi-eyebrow mono">LOLA'S READ</div>
          <div className="mi-quote">
            "Inventory is tight, days-on-market dropped 6 from last quarter, and three of the last five sales went over ask. Price aggressively, expect 3+ offers in the first 14 days."
          </div>
          <div className="mi-attr mono">
            <LolaOrb size={12} />
            <span>WRITTEN IN 0.8s · BASED ON 47 RECENT SALES</span>
          </div>
        </div>
        <div className="mi-card">
          <div className="mi-eyebrow mono">BUYER POOL</div>
          <div className="bp-row"><span>Pre-approved · ≥$847K</span><strong>1,284</strong></div>
          <div className="bp-row"><span>Match home features</span><strong>312</strong></div>
          <div className="bp-row"><span>Active in last 7 days</span><strong style={{ color: accentColor }}>47</strong></div>
          <div className="bp-row"><span>Worked with you before</span><strong style={{ color: accentColor }}>9</strong></div>
        </div>
      </div>
    </div>
  );
}

function SellerStrategyPanel({ accent }) {
  return (
    <div className="strat-panel seller">
      <div className="strat-panel-h">
        <h3>How to sell this home, specifically.</h3>
        <p>Not generic advice — a strategy built for this listing, this seller, this market.</p>
      </div>
      <div className="ss-grid">
        <div className="ss-card">
          <div className="ss-h">Lead with the light.</div>
          <p>South-facing windows on the main floor are this home's strongest asset. Photo at 10am. Lead the listing copy with "light-filled."</p>
          <div className="ss-tag mono">POSITIONING</div>
        </div>
        <div className="ss-card">
          <div className="ss-h">Stage the second bedroom as a nursery.</div>
          <p>Buyer pool skews young families. Nursery beats office for emotional pull.</p>
          <div className="ss-tag mono">STAGING</div>
        </div>
        <div className="ss-card">
          <div className="ss-h">Price at $847K, not $850K.</div>
          <p>$849-$850K bracket has 38% more saved searches than $850-$875K. The threshold matters.</p>
          <div className="ss-tag mono">PRICING</div>
        </div>
        <div className="ss-card">
          <div className="ss-h">Open house Saturday, not Sunday.</div>
          <p>This zip's last 12 weekend opens averaged 23 attendees Saturday vs 14 Sunday. Cap with offer-review Tuesday.</p>
          <div className="ss-tag mono">CADENCE</div>
        </div>
      </div>
    </div>
  );
}

function BuyerStrategyPanel({ accent }) {
  const accentColor = accent === "teal" ? "#2EBDBD" : "#E8573A";
  return (
    <div className="strat-panel buyer">
      <div className="strat-panel-h">
        <h3>Match the home to the buyer who'll actually want it.</h3>
        <p>Lola scores your buyer pool against this home, then drafts the outreach.</p>
      </div>
      <div className="bs-grid">
        <div className="bs-list">
          {[
            { n: "Jenna & Marcus", t: "First-time · $920K", score: 94 },
            { n: "The Liu Family", t: "Move-up · $1.1M", score: 88 },
            { n: "Aisha Patel", t: "Single buyer · $880K", score: 81 },
            { n: "Tom & Eli", t: "First-time · $890K", score: 76 },
            { n: "The Garcias", t: "Family of 5 · $950K", score: 71 },
          ].map((b) => (
            <div key={b.n} className="bs-row">
              <div className="bs-av" style={{ background: `linear-gradient(135deg, ${accentColor}, #2EBDBD)` }}>
                {b.n.split(" ").map(w => w[0]).slice(0,2).join("")}
              </div>
              <div className="bs-meta">
                <div className="bs-n">{b.n}</div>
                <div className="bs-t mono">{b.t.toUpperCase()}</div>
              </div>
              <div className="bs-score" style={{ color: accentColor }}>
                <strong>{b.score}</strong>
                <span className="mono">MATCH</span>
              </div>
            </div>
          ))}
        </div>
        <div className="bs-msg">
          <div className="bs-msg-head">
            <div className="mono">DRAFT MESSAGE · TO JENNA &amp; MARCUS</div>
          </div>
          <div className="bs-msg-body">
            <p>Hey Jenna &amp; Marcus —</p>
            <p>Quick one. Just listed at <strong>412 Henderson</strong>. South-facing light, walkable to Cedar Elementary (9.1), and your monthly comes in at <strong>$5,694</strong> — 98% of your pre-approval.</p>
            <p>Open Sat 11–1. Want me to set aside 11:15 for you?</p>
            <p>— Maria</p>
          </div>
          <div className="bs-msg-foot mono">SMS · ESTIMATED REPLY 84%</div>
        </div>
      </div>
    </div>
  );
}

function GraphicsPanel({ accent }) {
  const accentColor = accent === "teal" ? "#2EBDBD" : "#E8573A";
  return (
    <div className="strat-panel graphics">
      <div className="strat-panel-h">
        <h3>Comparison graphics, on your brand.</h3>
        <p>Listing vs. neighborhood. Price history. Days on market. Walkability and schools. Drop-in for any post or page.</p>
      </div>
      <div className="gfx-grid">
        <div className="gfx-card">
          <div className="gfx-eyebrow mono">VS. NEIGHBORHOOD</div>
          {[
            { l: "Price/sqft", a: 78, b: 58 },
            { l: "Walk score", a: 92, b: 64 },
            { l: "Schools", a: 88, b: 71 },
          ].map((b) => (
            <div key={b.l} className="bar-row">
              <div className="bar-label mono">{b.l.toUpperCase()}</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>
          ))}
        </div>
        <div className="gfx-card">
          <div className="gfx-eyebrow mono">PRICE HISTORY · 5 YR</div>
          <svg viewBox="0 0 200 100" width="100%" height="100">
            <line x1="0" y1="90" x2="200" y2="90" stroke="#E0D8D0" />
            <polyline points="0,80 40,72 80,55 120,48 160,28 200,18" fill="none" stroke={accentColor} strokeWidth="2"/>
            {[0,40,80,120,160,200].map((x,i) =>
              <circle key={i} cx={x} cy={[80,72,55,48,28,18][i]} r="2.5" fill={accentColor}/>
            )}
          </svg>
          <div className="gfx-stat-row mono">
            <span>2021 · $612K</span>
            <span style={{ color: accentColor }}>2026 · $847K</span>
          </div>
        </div>
        <div className="gfx-card">
          <div className="gfx-eyebrow mono">DAYS ON MARKET</div>
          <div className="dom-vis">
            <div className="dom-dial" style={{ "--accent": accentColor }}>
              <svg viewBox="0 0 100 100" width="100%" height="100%">
                <circle cx="50" cy="50" r="40" fill="none" stroke="#EFEAE5" strokeWidth="8"/>
                <circle cx="50" cy="50" r="40" fill="none" stroke={accentColor} strokeWidth="8"
                  strokeDasharray={`${(21/45)*251} 251`} strokeDashoffset="0"
                  transform="rotate(-90 50 50)" strokeLinecap="round" />
              </svg>
              <div className="dom-center">
                <strong>21</strong>
                <span className="mono">DAYS</span>
              </div>
            </div>
            <div className="dom-stat mono">VS. 45 NEIGHBORHOOD AVG</div>
          </div>
        </div>
        <div className="gfx-card">
          <div className="gfx-eyebrow mono">SCHOOLS &amp; WALKABILITY</div>
          <div className="sw-grid">
            <div className="sw-cell">
              <strong style={{ color: accentColor }}>9.1</strong>
              <span className="mono">CEDAR ELEM.</span>
            </div>
            <div className="sw-cell">
              <strong style={{ color: accentColor }}>8.7</strong>
              <span className="mono">JEFFERSON MS</span>
            </div>
            <div className="sw-cell">
              <strong style={{ color: accentColor }}>92</strong>
              <span className="mono">WALK SCORE</span>
            </div>
            <div className="sw-cell">
              <strong style={{ color: accentColor }}>78</strong>
              <span className="mono">BIKE SCORE</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function TelepromptedPanel({ accent }) {
  const [mode, setMode] = React.useState("prompter");
  const [scrolling, setScrolling] = React.useState(false);
  const accentColor = accent === "teal" ? "#2EBDBD" : "#E8573A";
  const scriptRef = React.useRef(null);

  React.useEffect(() => {
    if (!scrolling || !scriptRef.current || mode !== "prompter") return;
    const el = scriptRef.current;
    let raf;
    const tick = () => {
      el.scrollTop += 0.4;
      if (el.scrollTop + el.clientHeight >= el.scrollHeight - 1) {
        el.scrollTop = 0;
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [scrolling, mode]);

  return (
    <div className="strat-panel prompter">
      <div className="strat-panel-h">
        <h3>The script you'll read on camera.</h3>
        <p>Two modes — full teleprompter for walkthroughs, or quick cards for stories and reels.</p>
      </div>

      <div className="pp-mode-row">
        <div className="pp-mode-tabs">
          <button
            className={`pp-mode ${mode === "prompter" ? "active" : ""}`}
            onClick={() => setMode("prompter")}
          >Teleprompter</button>
          <button
            className={`pp-mode ${mode === "cards" ? "active" : ""}`}
            onClick={() => setMode("cards")}
          >Talking points</button>
        </div>
        {mode === "prompter" && (
          <div className="pp-controls mono">
            <button
              className="pp-play"
              onClick={() => setScrolling(s => !s)}
              style={{ background: scrolling ? accentColor : "#0A0A0A" }}
            >
              {scrolling ? "❚❚ PAUSE" : "▶ PLAY"}
            </button>
            <span>WPM 120</span>
            <span>EST 1:12</span>
          </div>
        )}
      </div>

      {mode === "prompter" ? (
        <div className="prompter-stage" style={{ "--accent": accentColor }}>
          <div className="prompter-screen big" ref={scriptRef}>
            <div className="prompter-text big">
              <p>Hey, it's Maria.</p>
              <p>I'm standing in front of <em>412 Henderson Avenue</em> — three beds, two baths, and what I think is the <strong>best light</strong> on the block.</p>
              <p>If you're a first-time buyer with around <strong>$5,700 a month</strong> to spend on housing, this one pencils. Let me walk you through why.</p>
              <p>One — the south-facing windows. The whole main floor stays bright until 4pm in winter. That's rare on this street.</p>
              <p>Two — Cedar Elementary, two blocks away, scores a 9.1.</p>
              <p>Three — at $847,000, you're <em>under</em> the neighborhood median price-per-square-foot. That doesn't happen often.</p>
              <p>Open house Saturday, eleven to one. Want me to save you a slot? Text me.</p>
              <p>— Maria Chen, Compass.</p>
            </div>
          </div>
          <div className="prompter-overlay" />
        </div>
      ) : (
        <div className="pp-cards">
          {[
            { n: "01", t: "The hook", b: "Best light on the block. South-facing main floor, bright until 4pm in winter." },
            { n: "02", t: "The buyer", b: "First-time buyers, ~$5,700/mo housing budget. This pencils at 7.125%, 30yr." },
            { n: "03", t: "The proof", b: "Cedar Elementary 9.1. Walk Score 92. $/sqft below neighborhood median." },
            { n: "04", t: "The math", b: "$847K · 20% down · est. monthly $5,694 · 98% of $920K pre-approval." },
            { n: "05", t: "The ask", b: "Open Sat 11-1. Reply YES for a 15-min slot." },
            { n: "06", t: "The sign-off", b: "Maria Chen · Compass · DRE #02134567." },
          ].map((c) => (
            <div key={c.n} className="pp-card">
              <div className="pp-card-n mono">{c.n}</div>
              <div className="pp-card-t">{c.t}</div>
              <div className="pp-card-b">{c.b}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function StrategyEnginePage({ accent, wordmark }) {
  const [tab, setTab] = React.useState("social");
  const accentColor = accent === "teal" ? "#2EBDBD" : "#E8573A";

  return (
    <React.Fragment>
      <PageHero
        eyebrow="STRATEGY ENGINE · POWERED BY LOLA"
        subtitle="Six modules that turn one listing into a complete campaign — calendar, intel, positioning, outreach, graphics, and the script you'll read on camera."
      >
        Six modules.<br />
        One <span className="hero-em">strategy engine.</span>
      </PageHero>

      <section className="strat-tabs-section">
        <div className="strat-tabs">
          {STRAT_TABS.map((t) => (
            <button
              key={t.id}
              className={`strat-tab ${tab === t.id ? "active" : ""}`}
              onClick={() => setTab(t.id)}
              style={tab === t.id ? { color: accentColor, borderColor: accentColor } : {}}
            >
              {t.label}
            </button>
          ))}
        </div>

        <div className="strat-panel-wrap">
          {tab === "social" && <SocialPlanPanel accent={accent} />}
          {tab === "market" && <MarketIntelPanel accent={accent} />}
          {tab === "seller" && <SellerStrategyPanel accent={accent} />}
          {tab === "buyer" && <BuyerStrategyPanel accent={accent} />}
          {tab === "graphics" && <GraphicsPanel accent={accent} />}
          {tab === "prompter" && <TelepromptedPanel accent={accent} />}
        </div>
      </section>

      <section className="page-cta">
        <div className="page-cta-inner">
          <h2>One listing in. A whole strategy out.</h2>
          <p>Stop opening Canva. Start sending campaigns.</p>
          <Waitlist accent={accent} />
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { StrategyEnginePage });