/* Reza · page sections */

const {
  IconArrow, IconCheck, IconX, IconChevron, IconMenu, IconClose,
  IconPen, IconCalendar, IconChat, IconChart, IconMail, IconSend,
  IconLinkedinBrand, IconXBrand,
} = window.RezaIcons;

const {
  HeroComposition, LinkedInPostMock, CalendarMock, DMReplyMock, ScenarioMock, BrandLogo, PORTRAIT_SRC,
} = window.RezaMocks;

const DASH_URL = "https://dash.geta.team/";
const LOGO_SRC = "../images/logo.png";

/* NAV (with mobile drawer) */
function Nav() {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  return (
    <React.Fragment>
      <nav className="nav">
        <div className="container nav-inner">
          <a href="../" className="nav-brand">
            <img src={LOGO_SRC} alt=""/>
            <span>Geta<span className="dot-cyan">.Team</span></span>
          </a>
          <div className="nav-links">
            <a href="../#solutions">Solutions</a>
            <a href="../pricing.html">Pricing</a>
            <a href="../#docs">Docs</a>
            <a href="../about.html">About</a>
          </div>
          <div className="nav-cta">
            <a href={DASH_URL} className="btn btn-ghost btn-sm">Log in</a>
            <a href={DASH_URL} className="btn btn-primary btn-sm">Start free trial</a>
            <button className="nav-burger" aria-label="Open menu" onClick={() => setOpen(true)}>
              <IconMenu/>
            </button>
          </div>
        </div>
      </nav>

      <div className={`mobile-scrim ${open ? 'open' : ''}`} onClick={() => setOpen(false)}/>
      <aside className={`mobile-drawer ${open ? 'open' : ''}`} aria-hidden={!open}>
        <div className="mobile-drawer-head">
          <a href="../" className="nav-brand">
            <img src={LOGO_SRC} alt=""/>
            <span>Geta<span className="dot-cyan">.Team</span></span>
          </a>
          <button className="mobile-drawer-close" aria-label="Close menu" onClick={() => setOpen(false)}>
            <IconClose/>
          </button>
        </div>
        <nav>
          <a href="../#solutions" onClick={() => setOpen(false)}>Solutions</a>
          <a href="../pricing.html" onClick={() => setOpen(false)}>Pricing</a>
          <a href="../#docs" onClick={() => setOpen(false)}>Docs</a>
          <a href="../about.html" onClick={() => setOpen(false)}>About</a>
        </nav>
        <div className="mobile-drawer-cta">
          <a href={DASH_URL} className="btn btn-outline">Log in</a>
          <a href={DASH_URL} className="btn btn-primary">Start free trial</a>
        </div>
      </aside>
    </React.Fragment>
  );
}

/* HERO */
function Hero() {
  return (
    <section className="hero">
      <div className="container">
        <a href="../#employees" className="hero-back">← All AI employees</a>
        <div className="hero-grid">
          <div>
            <div className="eyebrow dot">Real Estate VA · Always on</div>
            <h1 className="hero-headline">
              Listings tracked. Tours <em>booked.</em>
            </h1>
            <p className="hero-lede">
              She tracks listings, replies to enquiries, qualifies tour requests, and updates your CRM. Email, SMS, WhatsApp.
            </p>
            <div className="hero-cta-row">
              <a href={DASH_URL} className="btn btn-primary btn-lg">
                Hire Reza <IconArrow size={15} className="arrow"/>
              </a>
              <span className="hero-trust">
                <span className="dot"/> Ready in 4 minutes · 3-day free trial
              </span>
            </div>
          </div>
          <HeroComposition/>
        </div>
      </div>
    </section>
  );
}

/* FEATURE ROWS */
function FeatureRows() {
  return (
    <section className="section bg-soft">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">What she does</div>
          <h2 className="display display-md">
            Six jobs.<br/><em>One agent, every lead handled.</em>
          </h2>
          <p className="lede lede-center">
            Reza tracks listings, replies to enquiries, qualifies tour requests, and keeps your CRM clean. So you stay on the closings.
          </p>
        </div>

        <div className="feat-row">
          <div className="feat-copy">
            <div className="feat-num"><span className="n">01</span>She replies to every enquiry</div>
            <h3 className="feat-title">In <em>90 seconds, any hour</em>.</h3>
            <p>An enquiry lands on Zillow, your website, Facebook, an email. Reza replies in your voice with the listing details, the next steps and a polite ask to qualify the buyer or seller.</p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>Replies on email, SMS, WhatsApp, Zillow inbox</li>
              <li><span className="ic"><IconCheck/></span>Qualifies on budget, timeline, financing</li>
              <li><span className="ic"><IconCheck/></span>Books a tour or a call if the lead is hot</li>
            </ul>
          </div>
          <div className="feat-visual"><LinkedInPostMock/></div>
        </div>

        <div className="feat-row reverse">
          <div className="feat-copy">
            <div className="feat-num"><span className="n">02</span>She tracks every listing</div>
            <h3 className="feat-title">Price changes, <em>status flips</em>, on your radar.</h3>
            <p>Reza watches the MLS, Zillow, Redfin. New comparable comes online, your client gets the alert. Price drop on a watched property, you get the alert before the other agents.</p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>Daily MLS, Zillow, Redfin scan on your saved searches</li>
              <li><span className="ic"><IconCheck/></span>Price drop and status alerts in seconds</li>
              <li><span className="ic"><IconCheck/></span>Comparable analysis for every offer your client makes</li>
            </ul>
          </div>
          <div className="feat-visual alt"><CalendarMock/></div>
        </div>

        <div className="feat-row">
          <div className="feat-copy">
            <div className="feat-num"><span className="n">03</span>She runs the tour calendar</div>
            <h3 className="feat-title"><em>Three tours</em>, one Saturday, zero chaos.</h3>
            <p>Reza reads your calendar, your buyers' availability and the listing agents' rules. Books the tours, sends the confirmations, sends the reminder the morning of. Reschedules without drama.</p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>Books tours respecting listing-agent rules</li>
              <li><span className="ic"><IconCheck/></span>Sends reminders the morning of, with directions</li>
              <li><span className="ic"><IconCheck/></span>Reschedules in 2 clicks if anything moves</li>
            </ul>
          </div>
          <div className="feat-visual deep"><DMReplyMock/></div>
        </div>

        <div className="feat-plus">
          <div className="feat-plus-label">Plus, she also</div>
          <div className="feat-plus-grid">
            <div className="feat-plus-item">
              <span className="ic"><IconPen/></span>
              <div>
                <h4>Drafts offer documents</h4>
                <p>From your template, pulled with the right inspection windows and contingencies.</p>
              </div>
            </div>
            <div className="feat-plus-item">
              <span className="ic"><IconPen/></span>
              <div>
                <h4>Keeps your CRM clean</h4>
                <p>Every interaction logged, every contact tagged.</p>
              </div>
            </div>
            <div className="feat-plus-item">
              <span className="ic"><IconPen/></span>
              <div>
                <h4>Sends post-close care</h4>
                <p>Birthday cards, anniversary notes, market updates.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* MISSIONS */
const MISSIONS = [
  { I: IconChat      , t: "Replies to every enquiry", p: "Email, SMS, WhatsApp, Zillow. 90 second first reply, qualifies on budget and timeline.", tags: ['Zillow', 'SMS'] },
  { I: IconChart     , t: "Tracks every listing", p: "MLS, Zillow, Redfin scan. Price drops and status flips in seconds.", tags: ['MLS', 'Alerts'] },
  { I: IconCalendar  , t: "Runs the tour calendar", p: "Books tours respecting listing-agent rules. Reminders the morning of.", tags: ['Tours'] },
  { I: IconPen       , t: "Drafts offer documents", p: "From your template, with the right inspection windows and contingencies.", tags: ['Offers'] },
  { I: IconArrow     , t: "Keeps your CRM clean", p: "Every call, every text, every visit logged with the right tag.", tags: ['CRM'] },
  { I: IconMail      , t: "Sends post-close care", p: "Birthday cards, anniversary notes, neighborhood market updates.", tags: ['Retention'] },
];

function Missions() {
  return (
    <section className="section bg-canvas">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">Full scope</div>
          <h2 className="display display-md">
            The complete <em>real estate va sheet.</em>
          </h2>
          <p className="lede lede-center">
            Everything Reza handles, without supervision.
          </p>
        </div>

        <div className="miss-grid">
          {MISSIONS.map((m, i) => (
            <div className="miss-cell" key={i}>
              <div className="ic"><m.I/></div>
              <h3>{m.t}</h3>
              <p>{m.p}</p>
              <div className="miss-tags">{m.tags.map(t => <span className="miss-tag" key={t}>{t}</span>)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ROI */
function ROI() {
  return (
    <section className="section bg-soft">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">ROI</div>
          <h2 className="display display-md">
            The math is <em>uncomfortable.</em>
          </h2>
          <p className="lede lede-center">
            She covers the admin work that costs you a $60K licensed VA, for the price of a coffee subscription.
          </p>
        </div>

        <div className="stat-strip">
          <div className="stat-strip-cell">
            <div className="v"><em>$5K</em></div>
            <div className="l">Saved per month</div>
            <div className="s">vs hiring a real estate VA</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">90s</div>
            <div className="l">First reply to a lead</div>
            <div className="s">Day or night, every channel</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">3×</div>
            <div className="l">More leads qualified</div>
            <div className="s">No more ghosted enquiries</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">0</div>
            <div className="l">Tours forgotten</div>
            <div className="s">Reminders the morning of</div>
          </div>
          </div>

        <div className="compare">
          <div className="cmp-row head">
            <div className="cmp-cell">Capability</div>
            <div className="cmp-cell col-aria">Reza</div>
            <div className="cmp-cell">Real estate VA</div>
            <div className="cmp-cell">Agency</div>
          </div>
          {[
            ["Monthly cost", "from $49 /mo", "$5,000 loaded", "$2K to $5K retainer"],
            ["Replies after hours", <span className="cmp-mark yes"><IconCheck/> Always</span>, <span className="cmp-mark no">Office hours</span>, <span className="cmp-mark no">Office hours</span>],
            ["First reply in", "90 seconds", "20 to 60 minutes", "next business day"],
            ["Tracks MLS in real time", <span className="cmp-mark yes"><IconCheck/> Yes</span>, <span className="cmp-mark yes"><IconCheck/> Sometimes</span>, <span className="cmp-mark no">Generic alerts</span>],
            ["Updates your CRM", <span className="cmp-mark yes"><IconCheck/> Every interaction</span>, <span className="cmp-mark yes"><IconCheck/> Most</span>, <span className="cmp-mark no">Out of scope</span>],
            ["Scale 5× tomorrow", <span className="cmp-mark yes"><IconCheck/> Yes</span>, "Hire again", "Renegotiate"],
          ].map((row, i) => (
            <div className="cmp-row" key={i}>
              <div className="cmp-cell">{row[0]}</div>
              <div className="cmp-cell col-aria">{row[1]}</div>
              <div className="cmp-cell">{row[2]}</div>
              <div className="cmp-cell">{row[3]}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* USE CASES */
const USE_CASES = [
  {
    when: "Saturday · 22:14",
    title: "A buyer lead just landed on Zillow at 10 pm.",
    trigger: "Reads the lead, looks up the listing, drafts a personal reply in your voice.",
    outcome: "Reply in 90 seconds. Tour booked for Sunday at 11 am.",
    actions: [
      "Reads the enquiry and the matching listing",
      "Replies in your tone with the listing details and next steps",
      "Qualifies on budget (700K-850K), timeline (3 months) and pre-approval",
      "Proposes 3 tour slots that match your weekend calendar",
      "Logs the lead and the conversation in your CRM, tagged hot Saturday",
    ],
    mockKind: "slack",
  },
  {
    when: "Monday · 09:14",
    title: "Five new listings hit the MLS overnight in your client zones.",
    trigger: "Reza scans the MLS for every saved search.",
    outcome: "Five client emails out by 9:30, two showings booked by lunch.",
    actions: [
      "Cross-references new listings with each client saved search",
      "Drafts a personal email per client (not a generic alert)",
      "Schedules the showings within their availability windows",
      "Pulls 3 comparables for each match, ready for your CMA",
    ],
    mockKind: "alert",
  },
  {
    when: "Wednesday · 14:30",
    title: "Your client wants to make an offer tonight.",
    trigger: "Pulls the listing details, the recent comps and your standard offer template.",
    outcome: "Offer doc drafted in 12 min. Comparable analysis attached. Ready for your e-sign.",
    actions: [
      "Pulls the listing, taxes, HOA fees, days on market",
      "Runs 5 recent comparable sales within 0.5 mile",
      "Drafts the offer doc with the right inspection window and contingencies",
      "Attaches the CMA and your standard cover letter",
    ],
    mockKind: "case",
  },
  {
    when: "Continuous",
    title: "A past client just had a baby. A renewal is due. The market just shifted.",
    trigger: "Reza keeps the warm relationship going across the 3 to 5 year buying cycle.",
    outcome: "Every life event gets a card, every renewal gets a check-in, every shift gets a market note.",
    actions: [
      "Tracks life events, anniversaries and renewals for every past client",
      "Drafts a personal card or note when relevant",
      "Sends quarterly neighbourhood market updates",
      "Surfaces re-list and refinance opportunities before competitors do",
    ],
    mockKind: "dm",
  },
];

function UseCaseMock({ kind }) {
  if (kind === "dm") return <DMReplyMock/>;
  if (kind === "alert") {
    return (
      <ScenarioMock
        header={<React.Fragment>
          <div className="mock-title"><span className="channel-tag" style={{ background: 'var(--gt-fg-1)' }}>!</span>TechCrunch alert</div>
          <div className="mock-time">09:14</div>
        </React.Fragment>}
      >
        <div style={{ font: '600 14.5px/1.4 var(--gt-font)', color: 'var(--gt-fg-1)', marginBottom: 10 }}>
          Northstar AI raises $40M Series B
        </div>
        <div style={{ font: '400 13px/1.5 var(--gt-font)', color: 'var(--gt-fg-3)', marginBottom: 14 }}>
          The competitor in your space announced new funding led by a16z, valuing them at $300M.
        </div>
        <div style={{ background: 'var(--gt-cyan-tint)', border: '1px solid rgba(8,145,176,0.18)', borderRadius: 10, padding: 12, font: '400 12.5px/1.45 var(--gt-font)', color: 'var(--gt-fg-1)' }}>
          <div style={{ font: '600 10.5px/1 var(--gt-font)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gt-cyan)', marginBottom: 6 }}>Aria · Response plan</div>
          Drafting 1 LinkedIn post, 1 customer email, 6 personalised CRM nudges. Ready for review in 22 min.
        </div>
      </ScenarioMock>
    );
  }
  if (kind === "case") {
    return (
      <ScenarioMock
        header={<React.Fragment>
          <div className="mock-title"><span className="channel-tag" style={{ background: '#ec4899' }}>S</span>Sephora · Case study</div>
          <div className="mock-time">Day 1 → Day 8</div>
        </React.Fragment>}
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            ["Day 1", "Reply sent, interview booked"],
            ["Day 3", "30-min interview · auto-transcribed"],
            ["Day 5", "900-word draft · your review"],
            ["Day 7", "3 quote snippets · 60-sec social cut"],
            ["Day 8", <React.Fragment><b style={{ color: 'var(--gt-cyan)' }}>Live</b> · co-promoted with Sephora</React.Fragment>],
          ].map((row, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '64px 1fr', alignItems: 'center', padding: '8px 12px', borderRadius: 8, background: i === 4 ? 'var(--gt-cyan-tint)' : '#f8fafb' }}>
              <span style={{ font: '600 11px/1 var(--gt-font-mono)', color: 'var(--gt-cyan)' }}>{row[0]}</span>
              <span style={{ font: '400 13px/1.4 var(--gt-font)', color: 'var(--gt-fg-1)' }}>{row[1]}</span>
            </div>
          ))}
        </div>
      </ScenarioMock>
    );
  }
  /* slack default */
  return (
    <ScenarioMock
      header={<React.Fragment>
        <div className="mock-title"><span className="channel-tag">#</span>re-reza</div>
        <div className="mock-time">17:42</div>
      </React.Fragment>}
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div style={{ display: 'flex', gap: 8 }}>
          <div style={{ width: 24, height: 24, borderRadius: 5, background: '#fde68a', color: '#92400e', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: '700 10px/1 var(--gt-font)' }}>L</div>
          <div>
            <div style={{ font: '600 11.5px/1 var(--gt-font)', marginBottom: 4 }}>Lena <span style={{ fontWeight: 400, color: 'var(--gt-fg-4)', fontSize: 10 }}>17:42</span></div>
            <div style={{ font: '400 13px/1.5 var(--gt-font)', color: 'var(--gt-fg-1)' }}>Heads up, we're shipping v2 at 9am Saturday. Need a launch.</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <img src={PORTRAIT_SRC} alt="" style={{ width: 24, height: 24, borderRadius: 5 }}/>
          <div>
            <div style={{ font: '600 11.5px/1 var(--gt-font)', marginBottom: 4 }}><span style={{ color: 'var(--gt-cyan)' }}>Reza</span> <span style={{ fontWeight: 400, color: 'var(--gt-fg-4)', fontSize: 10 }}>17:43</span></div>
            <div style={{ font: '400 13px/1.5 var(--gt-font)', color: 'var(--gt-fg-1)' }}>On it. Pulling v2 notes from GitHub + 3 user interviews. Sequence ready by 20:30.</div>
            <div style={{ marginTop: 8, background: 'var(--gt-cyan-tint)', border: '1px solid rgba(8,145,176,0.18)', borderRadius: 10, padding: '10px 12px', font: '400 12px/1.5 var(--gt-font)' }}>
              <div style={{ font: '600 10px/1 var(--gt-font)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gt-cyan)', marginBottom: 5 }}>Plan</div>
              <div>• 18 posts across 3 platforms<br/>• 4-email waitlist sequence (2,400 ppl)<br/>• 40 pre-staged comment replies</div>
            </div>
          </div>
        </div>
      </div>
    </ScenarioMock>
  );
}

function UseCases() {
  const [open, setOpen] = React.useState(-1);
  return (
    <section className="section bg-canvas">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">Use cases</div>
          <h2 className="display display-md">
            Four moments. <em>She handles them on her own.</em>
          </h2>
          <p className="lede lede-center">
            Not demos. The situations Reza handles every week, without you chasing her.
          </p>
        </div>

        <div className="uc-stack">
          {USE_CASES.map((u, i) => {
            const reverse = i % 2 === 1;
            const isOpen = open === i;
            return (
              <div className={`uc-row ${reverse ? 'reverse' : ''}`} key={i}>
                <div className="uc-copy">
                  <div className="uc-num-when">
                    <div className="uc-num">{String(i + 1).padStart(2, '0')}</div>
                    <div className="uc-when">{u.when}</div>
                  </div>
                  <h3 className="uc-title">{u.title}</h3>
                  <p className="uc-trigger">{u.trigger}</p>
                  <div className="uc-outcome">
                    <span className="ic"><IconCheck size={16}/></span>
                    <span>{u.outcome}</span>
                  </div>
                  <button
                    className="uc-actions-toggle"
                    aria-expanded={isOpen}
                    onClick={() => setOpen(isOpen ? -1 : i)}
                  >
                    {isOpen ? "Hide the play-by-play" : "See the play-by-play"}
                    <span className="chev"><IconChevron size={14}/></span>
                  </button>
                  {isOpen && (
                    <ol className="uc-actions">
                      {u.actions.map((a, k) => <li key={k}>{a}</li>)}
                    </ol>
                  )}
                </div>
                <div className="feat-visual" style={{ aspectRatio: '1 / 0.9' }}>
                  <UseCaseMock kind={u.mockKind}/>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* INTEGRATIONS */
const CHANNELS = ["Zillow", "MLS", "Gmail", "Slack", "SMS", "WhatsApp", "HubSpot", "DocuSign"];

function Integrations() {
  return (
    <section className="section bg-soft">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">Integrations</div>
          <h2 className="display display-md">
            Plugs into the tools <em>you already use.</em>
          </h2>
          <p className="lede lede-center">
            She works inside your CRM and email as a real teammate. Replies on Zillow, SMS, WhatsApp. Tracks the MLS and Zillow daily. Posts directly to your social accounts.
            Reads from your CRM, calendar, and docs.
          </p>
        </div>
        <div className="int-grid">
          {CHANNELS.map(c => (
            <div className="int-tile" key={c}>
              <BrandLogo name={c}/>
              <div className="int-name">{c}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* DAY IN LIFE */
const DAY = [
  { t: "07:30", a: "Overnight enquiries replied", c: "Zillow" },
  { t: "09:30", a: "MLS scan, client alerts sent", c: "MLS" },
  { t: "13:00", a: "Tour calendar updated", c: "Gmail" },
  { t: "16:00", a: "Offer doc drafted", c: "DocuSign" },
  { t: "18:30", a: "Daily hot list to your phone", c: "SMS" },
];

function DayInLife() {
  return (
    <section className="section bg-canvas">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">Day in the life</div>
          <h2 className="display display-md">
            A Tuesday, <em>no lead ghosted, three tours booked.</em>
          </h2>
          <p className="lede lede-center">Five moments. Forty leads worked.</p>
        </div>
        <div className="day-track">
          <div className="day-line"/>
          <div className="day-grid">
            {DAY.map((d, i) => (
              <div className="day-cell" key={i}>
                <div className="day-bullet">{String(i + 1).padStart(2, '0')}</div>
                <div style={{ font: '500 12px/1 var(--gt-font-mono)', color: 'var(--gt-cyan)', letterSpacing: '0.04em' }}>{d.t}</div>
                <h4>{d.a}</h4>
                <div className="day-channel">{d.c}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* PERSONALITY */
function Personality() {
  return (
    <section className="section bg-soft">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">Personality</div>
          <h2 className="display display-md">
            She serves <em>like your best buyers agent.</em>
          </h2>
          <p className="lede lede-center">
            She learns from your past clients, your market and your tone. You stay in control of every commitment.
          </p>
        </div>

        <div className="pers-grid">
          <div className="pers-card">
            <h3>What she'll do</h3>
            <div className="sub">Default behaviours · editable in 30 seconds</div>
            <ul className="pers-list">
              <li className="yes"><span className="ic"><IconCheck/></span>Reply to every enquiry in 90 seconds, day or night</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Qualify leads on budget, timeline, pre-approval</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Book tours respecting listing-agent rules</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Log every interaction in your CRM</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Send personal care notes for past clients</li>
            </ul>
          </div>
          <div className="pers-card">
            <h3>What she'll never do</h3>
            <div className="sub">Hard guardrails · refuses, even if you ask</div>
            <ul className="pers-list">
              <li className="no"><span className="ic"><IconX/></span>Make legal or fair-housing statements in your name</li>
              <li className="no"><span className="ic"><IconX/></span>Discriminate on protected characteristics</li>
              <li className="no"><span className="ic"><IconX/></span>Quote a price or commission without your sign-off</li>
              <li className="no"><span className="ic"><IconX/></span>Share a client's budget with a listing agent</li>
              <li className="no"><span className="ic"><IconX/></span>Use templates that sound robotic</li>
            </ul>
          </div>
        </div>

      </div>
    </section>
  );
}

/* CTA band */
function MidCTA() {
  return (
    <section className="cta-band">
      <div className="container cta-inner">
        <div className="cta-text">
          <div className="cta-eyebrow">Start today</div>
          <h2 className="cta-title">Want this Tuesday <em>for your team?</em></h2>
          <p className="cta-sub">
            No 6-month onboarding. No quarterly KPIs. Reza ships Reza replies to her first enquiry before you finish your coffee.
          </p>
        </div>
        <a href={DASH_URL} className="btn btn-on-cyan">
          Hire Reza · 3-day free trial <IconArrow size={15} className="arrow"/>
        </a>
      </div>
    </section>
  );
}

/* PRICING */
function Pricing() {
  return (
    <section className="section bg-canvas" id="hire">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">Start today</div>
          <h2 className="display display-md">
            Reza starts in <em>4 minutes.</em>
          </h2>
          <p className="lede lede-center">
            Connect your channels, upload 5 sample posts, set guardrails. She writes Reza replies to her first enquiry before you finish your coffee.
          </p>
        </div>

        <div className="price-card">
          <div>
            <div className="price-tier">SaaS · Entry tier</div>
            <h3 className="price-name">Reza · Real Estate VA</h3>
            <p className="price-sub">Less than a single MLS subscription. Replaces a real estate VA.</p>
            <div className="price-amount-row">
              <div className="price-amount"><span className="currency">$</span>49</div>
              <div className="price-per">/ month</div>
            </div>
            <ul className="price-list">
              <li><span className="ic"><IconCheck/></span>20,000 credits / month, dedicated workspace</li>
              <li><span className="ic"><IconCheck/></span>Native sync with Zillow, MLS, HubSpot, Follow Up Boss</li>
              <li><span className="ic"><IconCheck/></span>Replies on email, SMS, WhatsApp, Zillow inbox</li>
              <li><span className="ic"><IconCheck/></span>Trained on your past clients and your market</li>
              <li><span className="ic"><IconCheck/></span>Books tours respecting listing-agent rules</li>
              <li><span className="ic"><IconCheck/></span>Daily hot-list to your phone</li>
            </ul>
            <a href={DASH_URL} className="btn btn-primary btn-lg">
              Hire Reza now <IconArrow size={15} className="arrow"/>
            </a>
          </div>

          <div className="price-side">
            <h4>What you save</h4>
            <ul>
              <li><span>Real estate VA (loaded)</span><b>$5,000/mo</b></li>
              <li><span>Lead response service</span><b>$400/mo</b></li>
              <li><span>CRM premium seat</span><b>$140/seat</b></li>
              <li><span>Showing tool</span><b>$60/seat</b></li>
              <li className="total"><span>Net annual saving</span><b>$72K</b></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* FAQ */
const FAQS = [
  { q: "Is she licensed?",
    a: "No. Reza is your assistant: she handles enquiries, books tours, drafts documents, logs interactions. Anything that requires a licensed agent (showing alone, negotiating, signing) stays with you. She makes you faster and never replaces you on the legal side." },
  { q: "Does she actually pull MLS data?",
    a: "Yes, via integrations with the major MLS providers (CoreLogic, Stellar, Bright). For markets without a direct API, she uses Zillow, Redfin and Realtor.com as fallback. Your data stays in your MLS account." },
  { q: "What about fair housing and compliance?",
    a: "She is trained on fair housing rules and refuses to make statements about neighborhoods or schools that could cross the line. She never asks or stores discriminatory criteria. Every conversation is logged for audit if needed." },
  { q: "How does she connect to my CRM?",
    a: "Native two-way sync with Follow Up Boss, HubSpot, KvCORE, Sierra Interactive. She logs every text, call, email, tour and offer. Your data stays in your system of record." },
  { q: "Can she work with my listing agent partner?",
    a: "Yes. Reza follows the listing agent's rules (showing windows, lock box codes, communication preferences). She CCs them when relevant and never goes around them." },
  { q: "Do I have to deal with AI API keys?",
    a: "Two options. Cloud: credits included, no separate AI bill. Self-hosted: plug in your own keys (OpenAI, Anthropic, AWS Bedrock or on-prem). You keep full control of your data." },
  { q: "How much does she really cost when I scale?",
    a: "Entry $49/mo, Solo $99/mo, Starter $179/mo. Scale tiers up to $2,499/mo. Annual saves 24% from Solo upward. Custom volume, data residency, or isolated setup: talk to sales." },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section bg-soft">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">FAQ</div>
          <h2 className="display display-md">
            Everything else you <em>want to ask.</em>
          </h2>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div className="faq-item" key={i}>
              <button className="faq-q" aria-expanded={open === i} onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="chev"><IconChevron/></span>
              </button>
              {open === i && <div className="faq-a">{f.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* FOOTER */
function Footer() {
  const cols = [
    { h: "Product",      links: [["Pricing","../pricing.html"], ["Solutions","../#solutions"], ["Use Cases","../#use-cases"], ["Custom LLM","../#llm"]] },
    { h: "Integrations", links: [["Slack","../#integrations"], ["WhatsApp","../#integrations"], ["Microsoft Teams","../#integrations"], ["Gmail & Outlook","../#integrations"], ["MCP Connector","../#integrations"]] },
    { h: "Resources",    links: [["Documentation","../docs.html"], ["About","../about.html"], ["Security","../security.html"], ["Support","../support.html"], ["Contact","../contact.html"]] },
    { h: "Legal",        links: [["Terms of Service","../terms.html"], ["Privacy Policy","../privacy.html"]] },
  ];
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <a href="../" className="brand">
              <img src={LOGO_SRC} alt=""/>
              <span>Geta<span className="dot-cyan">.Team</span></span>
            </a>
            <p className="footer-blurb">
              AI employees that work autonomously, remember everything, and integrate with the tools you already use.
            </p>
            <div className="footer-social">
              <a href="#linkedin" aria-label="LinkedIn"><IconLinkedinBrand size={18}/></a>
              <a href="#x" aria-label="X"><IconXBrand size={16}/></a>
            </div>
          </div>
          {cols.map(c => (
            <div key={c.h}>
              <h5>{c.h}</h5>
              <ul>{c.links.map(([label, href]) => <li key={label}><a href={href}>{label}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <span>© 2026 Geta.Team. All rights reserved.</span>
          <span>A brand of Elestio Limited, Dublin, Ireland.</span>
        </div>
      </div>
    </footer>
  );
}

window.RezaSections = {
  Nav, Hero, FeatureRows, Missions, ROI, UseCases, Integrations, DayInLife,
  Personality, MidCTA, Pricing, FAQ, Footer,
};