/* Vera · page sections */

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

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

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">Video Producer · Always on</div>
            <h1 className="hero-headline">
              Long-form to <em>shorts.</em> Daily.
            </h1>
            <p className="hero-lede">
              She cuts shorts from your long-form, writes captions, generates thumbnails, and schedules across platforms.
            </p>
            <div className="hero-cta-row">
              <a href={DASH_URL} className="btn btn-primary btn-lg">
                Hire Vera <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 recording, ten clips.</em>
          </h2>
          <p className="lede lede-center">
            Vera turns one long-form into ten polished clips, captioned, thumbnailed, and scheduled across every platform.
          </p>
        </div>

        <div className="feat-row">
          <div className="feat-copy">
            <div className="feat-num"><span className="n">01</span>She cuts shorts from long-form</div>
            <h3 className="feat-title">Ten shorts from <em>one podcast</em>.</h3>
            <p>Drop a podcast, a keynote, a long YouTube. Vera reads the transcript, finds the moments that actually punch, cuts them with the right hook and pace, captions them. Ready to post.</p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>Finds the 10 most clippable moments per long-form</li>
              <li><span className="ic"><IconCheck/></span>Vertical 9:16, horizontal 16:9 or square, you pick</li>
              <li><span className="ic"><IconCheck/></span>Auto captions with your fonts and brand colour</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 writes captions and thumbnails</div>
            <h3 className="feat-title">Hook, value, <em>CTA</em>.</h3>
            <p>For each clip, Vera writes the post copy that fits the platform: LinkedIn essay, TikTok hook, X thread. Plus the thumbnail, in your style.</p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>Platform-native copy: LinkedIn, X, TikTok, Reels, YouTube</li>
              <li><span className="ic"><IconCheck/></span>Thumbnails with your face, your fonts, your colours</li>
              <li><span className="ic"><IconCheck/></span>Hook variants A/B for the ones you want to test</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 schedules and reports</div>
            <h3 className="feat-title">Posts go out, <em>numbers come back</em>.</h3>
            <p>Vera posts at the best time per channel, replies to comments she can answer, escalates the rest. Each Monday you get the recap: top clip, top hook, what to repeat.</p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>Auto-publish across 6+ platforms</li>
              <li><span className="ic"><IconCheck/></span>Replies to easy comments in your voice</li>
              <li><span className="ic"><IconCheck/></span>Weekly recap with the clip and hook that worked</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>Cleans up the audio</h4>
                <p>Removes ums, ahs, and silences. Levels the mix.</p>
              </div>
            </div>
            <div className="feat-plus-item">
              <span className="ic"><IconPen/></span>
              <div>
                <h4>Adds B-roll</h4>
                <p>Pulls from your library or stock, on-brand.</p>
              </div>
            </div>
            <div className="feat-plus-item">
              <span className="ic"><IconPen/></span>
              <div>
                <h4>Drafts the YouTube chapter timestamps</h4>
                <p>From the transcript, with clear chapter titles.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* MISSIONS */
const MISSIONS = [
  { I: IconPen       , t: "Cuts shorts from long-form", p: "Reads the transcript, finds the punches, cuts with the right hook and pace.", tags: ['Shorts', 'Reels'] },
  { I: IconChat      , t: "Writes platform-native copy", p: "LinkedIn essay, TikTok hook, X thread, Reels caption. Different per channel.", tags: ['Captions'] },
  { I: IconChart     , t: "Designs thumbnails", p: "Your face, your fonts, your brand colours. A/B variants for the bigger bets.", tags: ['Thumbnails'] },
  { I: IconCalendar  , t: "Schedules across platforms", p: "Best time per channel based on your past data, not a generic table.", tags: ['Scheduling'] },
  { I: IconMail      , t: "Drafts YouTube chapters", p: "From the transcript, with clear chapter titles and timestamps.", tags: ['Chapters'] },
  { I: IconArrow     , t: "Reports what worked", p: "Weekly: top clip, top hook, what to double down on next week.", tags: ['Analytics'] },
];

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>video producer sheet.</em>
          </h2>
          <p className="lede lede-center">
            Everything Vera 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 video work of a $80K video editor, for the price of a coffee subscription.
          </p>
        </div>

        <div className="stat-strip">
          <div className="stat-strip-cell">
            <div className="v"><em>$6.7K</em></div>
            <div className="l">Saved per month</div>
            <div className="s">vs hiring a video editor</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">10</div>
            <div className="l">Clips per long-form</div>
            <div className="s">Same recording, ten posts</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">72h</div>
            <div className="l">Faster to publish</div>
            <div className="s">Down from 1 week to next morning</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">0</div>
            <div className="l">Generic templates</div>
            <div className="s">On-brand, every time</div>
          </div>
          </div>

        <div className="compare">
          <div className="cmp-row head">
            <div className="cmp-cell">Capability</div>
            <div className="cmp-cell col-aria">Vera</div>
            <div className="cmp-cell">Video editor</div>
            <div className="cmp-cell">Agency</div>
          </div>
          {[
            ["Monthly cost", "from $49 /mo", "$6,700 loaded", "$1K to $5K per project"],
            ["Time to first clip", "30 minutes", "2 to 5 days", "1 to 2 weeks"],
            ["Clips per long-form", "10 by default", "3 to 4 typically", "1 to 2"],
            ["Knows your brand", <span className="cmp-mark yes"><IconCheck/> Trained on your past videos</span>, "After 3 months", <span className="cmp-mark no">Generic style</span>],
            ["Auto-publishes", <span className="cmp-mark yes"><IconCheck/> All major platforms</span>, <span className="cmp-mark no">Hands them off</span>, <span className="cmp-mark no">Hands them off</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: "Monday · 09:14",
    title: "You just recorded a 90 min podcast.",
    trigger: "Reads the full transcript, finds the most punchy moments.",
    outcome: "10 vertical shorts, 10 horizontal clips, 10 captions, ready by lunch.",
    actions: [
      "Reads the 90 min transcript, scores each moment for hook and clarity",
      "Cuts the top 10 with a 3 second hook and a tight pacing",
      "Generates vertical 9:16, horizontal 16:9 and square versions",
      "Writes platform-native copy for LinkedIn, X, TikTok, Reels, YouTube Shorts",
      "Designs thumbnails using your brand kit",
    ],
    mockKind: "slack",
  },
  {
    when: "Wednesday · 11:08",
    title: "A LinkedIn clip is going viral.",
    trigger: "Vera spots the viral signal, drafts a follow-up content burst.",
    outcome: "4 follow-up posts ready in 1 hour. Engagement turned into 12 demo requests.",
    actions: [
      "Monitors engagement signals across platforms hourly",
      "Detects the breakout clip (above 3x your usual engagement)",
      "Drafts 4 follow-up posts: behind the scenes, expansion, contrarian take, CTA",
      "Replies to the 50 highest-signal comments in your voice",
      "Routes demo requests to your sales team with full context",
    ],
    mockKind: "alert",
  },
  {
    when: "Friday · 14:30",
    title: "A clip flopped, you want to know why.",
    trigger: "Vera compares the flop to your top performers.",
    outcome: "Diagnosis in 5 min. Hook rewritten, repost scheduled for Tuesday.",
    actions: [
      "Compares the hook, the pacing, the thumbnail to your top 20 clips",
      "Identifies what was off (hook too slow, no on-screen text in 2s)",
      "Drafts 3 alternative hooks and 2 alternative thumbnails",
      "Reschedules a re-edit for your highest-engagement window",
    ],
    mockKind: "case",
  },
  {
    when: "Continuous",
    title: "Your YouTube needs daily chapter timestamps.",
    trigger: "Vera generates the chapters and the description on every upload.",
    outcome: "Every upload gets clean chapters and a description, automatically.",
    actions: [
      "Reads the transcript of every new upload",
      "Generates clear chapter titles every 1 to 2 minutes",
      "Writes the YouTube description with timestamps and links",
      "Submits the description for your one-click approval",
    ],
    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>video-vera</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)' }}>Vera</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 Vera 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 = ["YouTube", "TikTok", "Instagram", "LinkedIn", "X", "Descript", "Adobe", "Canva"];

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 video tool and Slack as a real teammate. Posts directly to YouTube, TikTok, Instagram, LinkedIn, X. 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: "08:30", a: "Yesterday clips reviewed", c: "YouTube" },
  { t: "10:00", a: "10 shorts cut from a podcast", c: "Descript" },
  { t: "13:00", a: "Posts scheduled", c: "TikTok" },
  { t: "15:30", a: "Comments replied to", c: "LinkedIn" },
  { t: "18:00", a: "Weekly performance recap", c: "Slack" },
];

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>ten clips out, zero burnout.</em>
          </h2>
          <p className="lede lede-center">Five moments. One sleeping editor.</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 edits <em>like your senior creator.</em>
          </h2>
          <p className="lede lede-center">
            She learns from your past videos, your brand kit and your tone. You stay in control of every cut that goes live.
          </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>Cut clips on-brand, using your fonts and colours</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Generate platform-native captions and thumbnails</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Post at the best time per platform from your data</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Reply to easy comments in your voice</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Send a weekly recap with top clip and top hook</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>Use clickbait that misrepresents the content</li>
              <li className="no"><span className="ic"><IconX/></span>Publish a clip that violates your brand guide</li>
              <li className="no"><span className="ic"><IconX/></span>Use a face or a voice that is not yours</li>
              <li className="no"><span className="ic"><IconX/></span>Buy fake engagement or use bot tactics</li>
              <li className="no"><span className="ic"><IconX/></span>Cut a quote out of context</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. Vera ships Vera ships her first short before you finish your coffee.
          </p>
        </div>
        <a href={DASH_URL} className="btn btn-on-cyan">
          Hire Vera · 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">
            Vera starts in <em>4 minutes.</em>
          </h2>
          <p className="lede lede-center">
            Connect your channels, upload 5 sample posts, set guardrails. She writes Vera ships her first short before you finish your coffee.
          </p>
        </div>

        <div className="price-card">
          <div>
            <div className="price-tier">SaaS · Entry tier</div>
            <h3 className="price-name">Vera · Video Producer</h3>
            <p className="price-sub">Less than your editing software. Replaces a video editor.</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 publish to YouTube, TikTok, Instagram, LinkedIn, X</li>
              <li><span className="ic"><IconCheck/></span>Reads MP4, MOV, podcast audio, Loom, Zoom recordings</li>
              <li><span className="ic"><IconCheck/></span>Trained on your past videos, fonts and brand colours</li>
              <li><span className="ic"><IconCheck/></span>Auto thumbnails, captions, chapters, descriptions</li>
              <li><span className="ic"><IconCheck/></span>Weekly performance digest in Slack</li>
            </ul>
            <a href={DASH_URL} className="btn btn-primary btn-lg">
              Hire Vera now <IconArrow size={15} className="arrow"/>
            </a>
          </div>

          <div className="price-side">
            <h4>What you save</h4>
            <ul>
              <li><span>Video editor (loaded)</span><b>$6,700/mo</b></li>
              <li><span>Freelance editor (per clip)</span><b>$80 to $200</b></li>
              <li><span>Editing software seat</span><b>$30/seat</b></li>
              <li><span>Scheduling tool</span><b>$60/seat</b></li>
              <li className="total"><span>Net annual saving</span><b>$95K</b></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* FAQ */
const FAQS = [
  { q: "Will the clips look generic?",
    a: "No. Vera is trained on your past videos, your fonts and your brand kit. She uses your captions style, your thumbnail layout, your music if you have a library. Every export looks like you made it." },
  { q: "Can she edit a clip I record on my phone?",
    a: "Yes. Drop the file in Slack or upload it to her workspace. She cleans audio, levels the mix, adds captions in your style. Phone-quality recording in, polished short out." },
  { q: "Does she actually publish to platforms?",
    a: "Yes, via native integrations with YouTube, TikTok, Instagram, LinkedIn and X. You can also set everything to draft-mode for your manual approval. For platforms without a direct API, she prepares the export in the right format and reminds you." },
  { q: "Can she handle live reactions and comments?",
    a: "She handles tier-1 comments (thanks, simple questions) in your voice and escalates anything sensitive or commercial. You can also tell her to never reply on a specific clip." },
  { q: "What about copyright on music and B-roll?",
    a: "She uses your owned library by default. For stock, she only pulls from sources you connect (Artlist, Epidemic, your own Google Drive). She refuses to use unlicensed material, full stop." },
  { 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.VeraSections = {
  Nav, Hero, FeatureRows, Missions, ROI, UseCases, Integrations, DayInLife,
  Personality, MidCTA, Pricing, FAQ, Footer,
};