// "For loan officers" — tabbed showcase of flyer categories
const { useState: useLOState } = React;

const LO_CATEGORIES = [
  {
    id: "general",
    label: "General flyers",
    eyebrow: "BLANK CANVAS, ON BRAND",
    headline: "Anything you can describe, in seconds.",
    body: "Tell Lola what you need — \"first-time buyer guide,\" \"down payment options,\" \"why now\" — and get a finished, on-brand flyer back. No template hunting.",
    bullets: ["Prompt-to-flyer in plain English", "Auto-stamped with your brand kit", "Editable after generation"],
    sample: "general",
  },
  {
    id: "cobrand",
    label: "Co-branded",
    eyebrow: "REALTOR + LO",
    headline: "Show up on every listing your partners send.",
    body: "Your photo, NMLS, and contact info live alongside the realtor's brand on every flyer they generate. You're in the room, even when you're not.",
    bullets: ["NMLS + license auto-stamped", "Approval-once brand kit", "Shared edit history"],
    sample: "cobrand",
  },
  {
    id: "product",
    label: "Product flyers",
    eyebrow: "LOAN PRODUCTS",
    headline: "Every program, ready to send.",
    body: "FHA, VA, jumbo, DSCR, HELOC, buydowns. Pulled from your myLoanIQ product catalog and rendered into one-pagers a borrower actually reads.",
    bullets: ["Live rates from your pricing engine", "Buydown & ARM scenarios side-by-side", "Compliance-locked disclosures"],
    sample: "product",
  },
  {
    id: "property-site",
    label: "Property websites",
    eyebrow: "ONE LISTING, ONE URL",
    headline: "A single-property site for every listing.",
    body: "Lola spins up a custom-domain microsite per listing — gallery, financing scenarios, neighborhood, and a lead-capture form that lands in your CRM.",
    bullets: ["Custom domain (412henderson.com)", "Live financing calculator", "Lead capture → your CRM"],
    sample: "propsite",
  },
  {
    id: "open-house",
    label: "Open house",
    eyebrow: "WEEKEND COLLATERAL",
    headline: "Saturday, ready by Friday.",
    body: "Open-house flyers, sign-in QR codes, neighborhood door-hangers, and follow-up post-cards — generated as a kit, ready to print or text.",
    bullets: ["QR-code sign-in to capture leads", "Door-hanger + yard-sign matched set", "Follow-up flyer auto-queued for Monday"],
    sample: "openhouse",
  },
  {
    id: "social",
    label: "Social media",
    eyebrow: "INSTAGRAM · LINKEDIN · FB",
    headline: "Daily posts, on your brand, in one tap.",
    body: "Square, story, reel-cover — Lola adapts the same flyer into every social aspect ratio. Schedule a week of content in five minutes.",
    bullets: ["1:1, 4:5, 9:16 auto-export", "Caption + hashtags written for you", "Buffer / Hootsuite / direct post"],
    sample: "social",
  },
  {
    id: "daily",
    label: "Daily content",
    eyebrow: "PROGRAMS · BD · STORIES · MARKET",
    headline: "A new piece every morning, written for you.",
    body: "Lola writes a daily content drop — loan programs worth highlighting, business-development ideas for your partners, success stories from your closed pipeline, and what's moving the market today. Approve in one tap.",
    bullets: [
      "Program spotlights (FHA, VA, buydowns, HELOC)",
      "BD prompts ready to send",
      "Success stories from closed loans",
      "Market pulse — rates, bonds, headlines",
    ],
    sample: "daily",
  },
  {
    id: "occasion",
    label: "Occasions",
    eyebrow: "MILESTONES & FARMING",
    headline: "Birthdays, anniversaries, refi windows.",
    body: "myflyers.ai watches your CRM for the moments that matter — closing anniversaries, rate-drop windows, escrow milestones — and ships a flyer per occasion.",
    bullets: ["CRM-triggered (HubSpot, Salesforce)", "Refi-eligibility scans weekly", "Past-client win-backs"],
    sample: "occasion",
  },
];

function LOFlyerSample({ kind, accent }) {
  const accentColor = accent === "teal" ? "#2EBDBD" : "#E8573A";
  const accentBg =
    accent === "teal" ? "#2EBDBD" :
    accent === "gradient" ? "linear-gradient(135deg, #E8573A 0%, #2EBDBD 100%)" :
    "#E8573A";

  if (kind === "general") {
    return (
      <div className="lo-sample general">
        <div className="lo-gen-prompt mono">
          <span className="lo-gen-caret" style={{ background: accentColor }} />
          <span>"first-time buyer guide, friendly tone"</span>
        </div>
        <div className="lo-gen-divider" />
        <div className="lo-gen-eyebrow mono" style={{ color: accentColor }}>FIRST HOME · A SHORT GUIDE</div>
        <div className="lo-gen-headline">You're closer<br />than you think.</div>
        <div className="lo-gen-grid">
          <div className="lo-gen-step"><div className="mono">01</div>Pre-approval</div>
          <div className="lo-gen-step"><div className="mono">02</div>Search</div>
          <div className="lo-gen-step"><div className="mono">03</div>Offer</div>
          <div className="lo-gen-step"><div className="mono">04</div>Close</div>
        </div>
      </div>
    );
  }
  if (kind === "propsite") {
    return (
      <div className="lo-sample propsite">
        <div className="lo-prop-bar mono">
          <span className="lo-prop-dot" /><span className="lo-prop-dot" /><span className="lo-prop-dot" />
          <span className="lo-prop-url">412henderson.com</span>
        </div>
        <div className="lo-prop-hero" style={{ background: "linear-gradient(180deg, #FFD9C7, #FFEFE4)" }}>
          <svg viewBox="0 0 320 130" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
            <rect x="0" y="90" width="320" height="60" fill="#D7CFC7" />
            <polygon points="60,90 160,30 260,90" fill="#0A0A0A" />
            <rect x="80" y="85" width="160" height="50" fill="#FAFAFA" />
            <rect x="100" y="100" width="28" height="28" fill="#2EBDBD" />
            <rect x="190" y="100" width="28" height="28" fill="#2EBDBD" />
            <rect x="148" y="108" width="22" height="27" fill="#0A0A0A" />
          </svg>
        </div>
        <div className="lo-prop-meta">
          <div className="lo-prop-addr">412 Henderson Ave</div>
          <div className="lo-prop-row mono"><span>$847,000</span><span>·</span><span>3BD 2BA</span><span>·</span><span>1,940 SQFT</span></div>
        </div>
        <div className="lo-prop-tabs mono">
          <span className="active" style={{ color: accentColor, borderColor: accentColor }}>FINANCING</span>
          <span>GALLERY</span>
          <span>NEIGHBORHOOD</span>
          <span>TOUR</span>
        </div>
      </div>
    );
  }
  if (kind === "openhouse") {
    return (
      <div className="lo-sample openhouse">
        <div className="lo-open-band" style={{ background: accentColor }}>
          <div className="mono lo-open-eyebrow">SAT MAY 4 · 1–4 PM</div>
          <div className="lo-open-title">OPEN<br />HOUSE</div>
        </div>
        <div className="lo-open-body">
          <div className="lo-open-addr">412 Henderson Ave</div>
          <div className="lo-open-grid">
            <div className="lo-open-stat"><div className="mono">PRICE</div><b>$847K</b></div>
            <div className="lo-open-stat"><div className="mono">EST. MO.</div><b>$5,694</b></div>
            <div className="lo-open-stat"><div className="mono">BD/BA</div><b>3 / 2</b></div>
          </div>
          <div className="lo-open-foot">
            <div className="lo-open-qr">
              <svg viewBox="0 0 40 40" width="40" height="40">
                <rect width="40" height="40" fill="white"/>
                <g fill="#0A0A0A">
                  <rect x="2" y="2" width="10" height="10"/><rect x="4" y="4" width="6" height="6" fill="white"/><rect x="6" y="6" width="2" height="2"/>
                  <rect x="28" y="2" width="10" height="10"/><rect x="30" y="4" width="6" height="6" fill="white"/><rect x="32" y="6" width="2" height="2"/>
                  <rect x="2" y="28" width="10" height="10"/><rect x="4" y="30" width="6" height="6" fill="white"/><rect x="6" y="32" width="2" height="2"/>
                  <rect x="15" y="4" width="2" height="2"/><rect x="19" y="4" width="2" height="2"/><rect x="23" y="6" width="2" height="2"/>
                  <rect x="15" y="15" width="2" height="2"/><rect x="19" y="17" width="2" height="2"/><rect x="22" y="15" width="2" height="2"/><rect x="26" y="19" width="2" height="2"/>
                  <rect x="15" y="23" width="2" height="2"/><rect x="19" y="25" width="2" height="2"/><rect x="23" y="23" width="2" height="2"/>
                  <rect x="15" y="30" width="2" height="2"/><rect x="22" y="32" width="2" height="2"/><rect x="26" y="30" width="2" height="2"/><rect x="30" y="19" width="2" height="2"/><rect x="32" y="24" width="2" height="2"/><rect x="28" y="28" width="2" height="2"/>
                </g>
              </svg>
            </div>
            <div className="mono lo-open-qr-label">SCAN TO<br/>SIGN IN</div>
          </div>
        </div>
      </div>
    );
  }
  if (kind === "cobrand") {
    return (
      <div className="lo-sample">
        <div className="lo-sample-band" style={{ background: accentBg }}>
          <div className="mono lo-sample-eyebrow">CO-LISTED · DREAM HOMES REALTY × CASCADE LENDING</div>
          <div className="lo-sample-headline">Your home,<br />your monthly,<br />your team.</div>
        </div>
        <div className="lo-sample-foot">
          <div className="lo-sample-people">
            <div className="lo-avatar" style={{ background: "#FFC9B5" }}>SR</div>
            <div className="lo-avatar overlap" style={{ background: "#B5E8E8" }}>MH</div>
          </div>
          <div className="lo-sample-meta mono">
            <div>SARAH ROSS · REALTOR</div>
            <div>MORGAN HAYES · NMLS 14829</div>
          </div>
        </div>
      </div>
    );
  }
  if (kind === "product") {
    return (
      <div className="lo-sample">
        <div className="lo-sample-rows">
          <div className="lo-row">
            <span className="mono lo-row-tag">CONV 30</span>
            <span className="lo-row-rate">7.125%</span>
            <span className="mono lo-row-mo">$5,694/mo</span>
          </div>
          <div className="lo-row featured" style={{ borderColor: accent === "teal" ? "#2EBDBD" : "#E8573A" }}>
            <span className="mono lo-row-tag" style={{ color: accent === "teal" ? "#2EBDBD" : "#E8573A" }}>2-1 BUYDOWN</span>
            <span className="lo-row-rate">5.125%<span className="lo-yr1">yr 1</span></span>
            <span className="mono lo-row-mo">$4,612/mo</span>
          </div>
          <div className="lo-row">
            <span className="mono lo-row-tag">FHA 30</span>
            <span className="lo-row-rate">6.875%</span>
            <span className="mono lo-row-mo">$5,544/mo</span>
          </div>
          <div className="lo-row">
            <span className="mono lo-row-tag">JUMBO 7/1</span>
            <span className="lo-row-rate">6.625%</span>
            <span className="mono lo-row-mo">$5,402/mo</span>
          </div>
        </div>
        <div className="lo-sample-disclosure mono">
          BASED ON $847K · 20% DOWN · APR 7.31% · LICENSED IN CA, OR, WA
        </div>
      </div>
    );
  }
  if (kind === "social") {
    return (
      <div className="lo-sample social">
        <div className="lo-social-tile primary" style={{ background: accentBg }}>
          <div className="mono lo-social-eyebrow">RATES · MAY 1</div>
          <div className="lo-social-rate">7.125<span>%</span></div>
          <div className="mono lo-social-foot">30YR · CONV</div>
        </div>
        <div className="lo-social-stack">
          <div className="lo-social-tile sm">
            <div className="mono lo-tile-label">9:16</div>
            <div className="lo-tile-bg" style={{ background: "#0A0A0A", color: "#FAFAFA" }}>STORY</div>
          </div>
          <div className="lo-social-tile sm">
            <div className="mono lo-tile-label">4:5</div>
            <div className="lo-tile-bg" style={{ background: "#FFE6DD" }}>FEED</div>
          </div>
        </div>
      </div>
    );
  }
  if (kind === "daily") {
    return (
      <div className="lo-sample daily">
        <div className="lo-daily-head">
          <div className="mono">MAY 1 · 7:45 AM · LOLA QUEUE</div>
          <span className="lo-daily-pulse" style={{ background: accentColor }} />
        </div>

        <div className="lo-daily-item">
          <div className="lo-daily-tag mono" style={{ color: accentColor, borderColor: accentColor }}>PROGRAM</div>
          <div className="lo-daily-content">
            <div className="lo-daily-title">2-1 Buydown · why it pencils today</div>
            <div className="lo-daily-meta mono">FHA · CONV · 60-SEC READ</div>
          </div>
        </div>

        <div className="lo-daily-item">
          <div className="lo-daily-tag mono">BD</div>
          <div className="lo-daily-content">
            <div className="lo-daily-title">5 talking points for your top 3 realtors</div>
            <div className="lo-daily-meta mono">PARTNER OUTREACH · TEXTABLE</div>
          </div>
        </div>

        <div className="lo-daily-item">
          <div className="lo-daily-tag mono">STORY</div>
          <div className="lo-daily-content">
            <div className="lo-daily-title">"The Hendersons closed in 19 days."</div>
            <div className="lo-daily-meta mono">SUCCESS · POST-READY</div>
          </div>
        </div>

        <div className="lo-daily-item market">
          <div className="lo-daily-tag mono">MARKET</div>
          <div className="lo-daily-content">
            <div className="lo-daily-title">30yr ▼ 0.125 overnight</div>
            <div className="lo-daily-spark inline">
              <svg viewBox="0 0 80 20" preserveAspectRatio="none" width="80" height="20">
                <polyline
                  points="0,12 10,11 20,13 30,9 40,11 50,8 60,9 70,5 80,6"
                  fill="none" stroke={accentColor} strokeWidth="1.5"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
    );
  }
  if (kind === "occasion") {
    return (
      <div className="lo-sample occasion">
        <div className="lo-occasion-cake" style={{ background: `linear-gradient(135deg, ${accent === "teal" ? "#2EBDBD" : "#E8573A"}, #2EBDBD)` }}>
          <span>1</span>
        </div>
        <div className="lo-occasion-text">
          <div className="lo-occasion-title">One year in the home.</div>
          <div className="mono lo-occasion-sub">THE HENDERSON FAMILY · 412 OAK · MAY 1, 2025</div>
        </div>
        <div className="lo-occasion-foot mono">
          REFI WINDOW: <span style={{ color: accent === "teal" ? "#2EBDBD" : "#E8573A" }}>OPEN</span>
        </div>
      </div>
    );
  }
  return null;
}

function LoanOfficerSection({ accent, wordmark }) {
  const [active, setActive] = useLOState("general");
  const cat = LO_CATEGORIES.find((c) => c.id === active);

  return (
    <section id="for-lo" className="lo-section">
      <div className="lo-head">
        <div className="lo-eyebrow mono">FOR LOAN OFFICERS</div>
        <h2 className="lo-h2">
          A flyer for <span className="lo-h2-em">every</span> conversation
          <br />you have all week.
        </h2>
        <p className="lo-sub">
          Realtors think about the listing. Loan officers think about the relationship.
          myflyers.ai gives you on-brand collateral for every touchpoint —
          co-listings, rate sheets, social, daily market notes, and milestone moments.
        </p>
      </div>

      <div className="lo-tabs" role="tablist">
        {LO_CATEGORIES.map((c) => (
          <button
            key={c.id}
            role="tab"
            aria-selected={active === c.id}
            className={`lo-tab ${active === c.id ? "active" : ""}`}
            onClick={() => setActive(c.id)}
          >
            <span className="mono lo-tab-num">{String(LO_CATEGORIES.indexOf(c) + 1).padStart(2, "0")}</span>
            <span>{c.label}</span>
          </button>
        ))}
      </div>

      <div className="lo-body" key={active}>
        <div className="lo-body-text">
          <div className="lo-body-eyebrow mono">{cat.eyebrow}</div>
          <h3 className="lo-body-headline">{cat.headline}</h3>
          <p className="lo-body-copy">{cat.body}</p>
          <ul className="lo-body-list">
            {cat.bullets.map((b) => (
              <li key={b}>
                <span className="lo-bullet" style={{ background: accent === "teal" ? "#2EBDBD" : accent === "gradient" ? "linear-gradient(135deg, #E8573A, #2EBDBD)" : "#E8573A" }} />
                {b}
              </li>
            ))}
          </ul>
        </div>
        <div className="lo-body-visual">
          <LOFlyerSample kind={cat.sample} accent={accent} />
        </div>
      </div>

      <div className="lo-volume">
        <div className="lo-volume-stat">
          <div className="lo-volume-n">200+</div>
          <div className="mono lo-volume-l">TEMPLATES PER LO, OUT OF THE BOX</div>
        </div>
        <div className="lo-volume-stat">
          <div className="lo-volume-n">8</div>
          <div className="mono lo-volume-l">FLYER FORMATS, ONE BRAND KIT</div>
        </div>
        <div className="lo-volume-stat">
          <div className="lo-volume-n">Daily</div>
          <div className="mono lo-volume-l">CONTENT QUEUED BY LOLA, EVERY MORNING</div>
        </div>
      </div>
    </section>
  );
}

window.LoanOfficerSection = LoanOfficerSection;