// Brunu v4 — based on real Brunu app screenshots
// Bold black sans-serif headlines, light cool grey background, dashed eyebrows
// Real messaging: Learn + Do Anything, One Agent Every App, See What's Coming Next, etc.

function Nav() {
  const [open, setOpen] = React.useState(false);
  // Intro animation: nav starts collapsed as just the logo button, then
  // slides open to the full bar after a beat. Pure CSS transition driven
  // by toggling a class on the root <nav>.
  const [collapsed, setCollapsed] = React.useState(true);
  React.useEffect(() => {
    const t = setTimeout(() => setCollapsed(false), 650);
    return () => clearTimeout(t);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const links = [
    { l: 'Agent',     h: 'v4-agent.html' },
    { l: 'Forecasts', h: 'v4-forecasts.html' },
    { l: 'Chat',      h: 'https://www.brunu.ai/chat' },
    { l: 'Markets',   h: '#markets' },
  ];
  return (
    <nav className={`bx-nav${collapsed ? ' bx-nav--collapsed' : ''}`}>
      <a href="https://www.brunu.ai" className="bx-nav__logo">
        <img src="v4/logo-white.png" alt="Brunu" className="bx-nav__logo-img" />
        <span className="bx-nav__logo-text">Brunu AI</span>
      </a>
      <ul className="bx-nav__links">
        {links.map(l => <li key={l.l}><a href={l.h}>{l.l}</a></li>)}
      </ul>
      <div className="bx-nav__cta">
        <a href="https://www.brunu.ai/login" className="bx-nav__signin">Sign in</a>
        <a href="https://www.brunu.ai/chat" className="bx-nav__cta-btn">Open Brunu</a>
        <a href="https://apps.apple.com/us/app/brunu-ai/id6761738315" className="bx-nav__cta-btn" style={{background:'#0a0a0a',color:'#fff',border:'1px solid rgba(255,255,255,0.18)'}}>Download iOS</a>
      </div>
      <button className="bx-nav__burger" aria-label="Open menu" onClick={() => setOpen(true)}>
        <span></span><span></span><span></span>
      </button>
      {open && ReactDOM.createPortal(
        // Portal — escapes the nav's transformed containing block so the
        // menu can be position:fixed against the viewport.
        // brand.ai-style: two distinct rounded panels (bar + panel) with
        // the page background visible between them and around them.
        <div className="bx-mobile-menu" role="dialog" aria-modal="true">
          <div className="bx-mobile-menu__bar">
            <a href="https://www.brunu.ai" className="bx-mobile-menu__logo-link">
              <img src="v4/logo-white.png" alt="Brunu" className="bx-mobile-menu__logo-img" />
            </a>
            <button className="bx-mobile-menu__close" aria-label="Close menu" onClick={() => setOpen(false)}>×</button>
          </div>
          <div className="bx-mobile-menu__panel">
            <ul className="bx-mobile-menu__links">
              {links.map(l => <li key={l.l}><a href={l.h} onClick={() => setOpen(false)}>{l.l}</a></li>)}
              <li><a href="https://www.brunu.ai/login" onClick={() => setOpen(false)}>Sign in</a></li>
            </ul>
            <div className="bx-mobile-menu__cta">
              <a href="https://www.brunu.ai/chat" className="bx-btn bx-btn--primary bx-btn--lg">Open Brunu</a>
              <a href="https://apps.apple.com/us/app/brunu-ai/id6761738315" className="bx-btn bx-btn--primary bx-btn--lg bx-btn--io">Download for iOS</a>
            </div>
          </div>
        </div>,
        document.body
      )}
    </nav>
  );
}

// Eyebrow with dashes around it (matches screenshots)
function Eyebrow({ children, light, center }) {
  return (
    <p className={"bx-eyebrow-dash" + (light ? " bx-eyebrow-dash--light" : "") + (center ? " bx-eyebrow-dash--center" : "")}>
      <span className="bx-eyebrow-dash__rule"></span>
      <span>{children}</span>
      <span className="bx-eyebrow-dash__rule"></span>
    </p>
  );
}

function Hero() {
  return (
    <section className="bx-hero" data-screen-label="01 Hero">
      <Eyebrow center>INTELLIGENCE FOR EVERYONE</Eyebrow>
      <h1 className="bx-hero__title">
        <span className="bx-hero__title-line">Brunu knows.</span>
        <span className="bx-hero__title-line">You <em>decide.</em></span>
      </h1>
      <p className="bx-hero__sub">
        The brilliant, well-read friend everyone deserves.<br/>
        One AI that reads every app, researches, writes, analyzes,<br/>
        builds, forecasts, and acts &mdash; in your pocket.
      </p>
      <div className="bx-hero__cta">
        <a href="https://www.brunu.ai/chat" className="bx-btn bx-btn--primary bx-btn--lg">Open Brunu</a>
        <a href="https://apps.apple.com/us/app/brunu-ai/id6761738315" className="bx-btn bx-btn--primary bx-btn--lg">Download for iOS</a>
        <a href="v4-agent.html" className="bx-btn bx-btn--ghost bx-btn--lg">See what it does</a>
      </div>
      <p className="bx-hero__meta">Free to start &middot; No card required</p>

      {/* Cloudy sky hero image with floating UI card + cursor label */}
      <div className="bx-hero__skybox">
        <div className="bx-hero__sky">
          <img
            src="https://images.unsplash.com/photo-1534088568595-a066f410bcda?w=2000&q=80&auto=format&fit=crop"
            alt=""
            className="bx-hero__sky-img"
          />
          <span className="bx-hero__cursor" style={{top:'58%', left:'46%'}}>
            <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
              <path d="M3 2 L3 19 L8 14 L11 21 L14 20 L11 13 L18 13 Z" fill="#000" stroke="#fff" strokeWidth="1.5" strokeLinejoin="round"/>
            </svg>
            <span className="bx-hero__cursor-label">Brunu</span>
          </span>
        </div>

        {/* Floating "Thinking" card — geopolitics + agentic actions */}
        <div className="bx-hero__thinking">
            <div className="bx-thinking__head">
              <span className="bx-thinking__spinner"></span>
              <span className="bx-thinking__title">Thinking</span>
              <span className="bx-thinking__sec">14s</span>
              <span className="bx-thinking__caret">&#9662;</span>
            </div>
            <div className="bx-thinking__prompt">
              <span className="bx-thinking__prompt-label">PROMPT</span>
              <span className="bx-thinking__prompt-text">&ldquo;Will the Strait of Hormuz reopen this month? Brief me, then alert me if it does.&rdquo;</span>
            </div>
            <div className="bx-thinking__step">
              <span className="bx-thinking__dot"></span>
              <span className="bx-thinking__step-label">Understanding</span>
            </div>
            <p className="bx-thinking__para">
              You want a near-term forecast on Strait of Hormuz reopening, plus a live trigger for when shipping traffic resumes.
            </p>
            <p className="bx-thinking__para">
              I&rsquo;ll cross-check Iran/US ceasefire signals, IRGC statements, AIS tanker data, and Brent crude moves &mdash; then arm an alert.
            </p>
            <div className="bx-thinking__step">
              <span className="bx-thinking__dot"></span>
              <span className="bx-thinking__step-label">Searching</span>
            </div>
            <div className="bx-thinking__row">
              <span className="bx-thinking__row-icon">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#7a7f88" strokeWidth="1.6"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 3 2.5 15 0 18M12 3c-2.5 3-2.5 15 0 18"/></svg>
              </span>
              <span className="bx-thinking__row-text">Reuters, NBC, Al Jazeera &mdash; ceasefire status</span>
              <span className="bx-thinking__row-meta">31 results</span>
              <span className="bx-thinking__row-chev">&rsaquo;</span>
            </div>
            <div className="bx-thinking__row">
              <span className="bx-thinking__row-icon">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#7a7f88" strokeWidth="1.6"><path d="M3 17l4-4 4 3 7-9"/><path d="M14 7h6v6"/></svg>
              </span>
              <span className="bx-thinking__row-text">AIS tanker traffic, Brent crude tape</span>
              <span className="bx-thinking__row-meta">live feed</span>
              <span className="bx-thinking__row-chev">&rsaquo;</span>
            </div>
            <div className="bx-thinking__step">
              <span className="bx-thinking__dot"></span>
              <span className="bx-thinking__step-label">Acting</span>
            </div>
            <div className="bx-thinking__row bx-thinking__row--action">
              <span className="bx-thinking__row-icon">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#0a7a4a" strokeWidth="1.8"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9z"/><path d="M10 21h4"/></svg>
              </span>
              <span className="bx-thinking__row-text">Armed alert: Hormuz reopen &middot; tankers &gt; 5/day</span>
              <span className="bx-thinking__row-meta bx-thinking__row-meta--ok">active</span>
              <span className="bx-thinking__row-chev">&rsaquo;</span>
            </div>
            <div className="bx-thinking__row bx-thinking__row--action">
              <span className="bx-thinking__row-icon">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#0a7a4a" strokeWidth="1.8"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
              </span>
              <span className="bx-thinking__row-text">Drafted brief &mdash; emailed to you 8:14am</span>
              <span className="bx-thinking__row-meta bx-thinking__row-meta--ok">sent</span>
              <span className="bx-thinking__row-chev">&rsaquo;</span>
            </div>
        </div>
      </div>

      <div className="bx-hero__testimonials">
        <Quote stars={5} text="Finally, an AI that actually does the thing." who="Maya R." role="Product @ Figma" />
        <Quote stars={5} text="The forecasts alone are worth the price. It&rsquo;s not a chatbot &mdash; it&rsquo;s an edge." who="Devon K." role="Analyst, NYC" />
        <Quote stars={5} text="Cancelled four subscriptions. Kept this one." who="Priya S." role="Founder" />
      </div>
    </section>
  );
}

function Quote({ stars, text, who, role }) {
  return (
    <div className="bx-quote">
      <div className="bx-quote__stars">{'\u2605'.repeat(stars)}</div>
      <p className="bx-quote__text">&ldquo;{text}&rdquo;</p>
      <div className="bx-quote__who">
        <span className="bx-quote__avatar"></span>
        <div>
          <div className="bx-quote__name">{who}</div>
          <div className="bx-quote__role">{role}</div>
        </div>
      </div>
    </div>
  );
}

// Agentic AI section — "Learn + Do Anything"
function Agentic() {
  return (
    <section id="agentic" className="bx-section bx-section--center" data-screen-label="02 Agentic">
      <Eyebrow center>AGENTIC AI</Eyebrow>
      <h2 className="bx-h2-display">Learn + Do <em>Anything.</em></h2>
      <p className="bx-lede bx-lede--center">
        The most intelligent AI on your phone. It doesn&rsquo;t just answer &mdash; it gets things done.
      </p>

      <div className="bx-action-pills">
        {['Create','Develop app','Wide Research','Research','Spreadsheet','Write','Image','Slides','Website','Email','Schedule','Analyze'].map(a => (
          <span key={a} className="bx-action-pill">
            <span className="bx-action-pill__dot"></span>
            {a}
          </span>
        ))}
      </div>

      <div className="bx-prompt-bar">
        <span className="bx-prompt-bar__plus">+</span>
        <span className="bx-prompt-bar__text">Ask Brunu&hellip;</span>
        <span className="bx-prompt-bar__send">&uarr;</span>
      </div>
      <p className="bx-finepro">Brunu is AI &mdash; double-check its answers as Brunu can make mistakes.</p>
    </section>
  );
}

// One Agent. Every App. — REAL brand logos via unpkg simple-icons + CSS filter tinting
function Integrations() {
  const apps = [
    { name: 'iMessage',  bg: '#1ec763', slug: 'imessage',         filter: 'invert' },
    { name: 'X',         bg: '#000',    slug: 'x',                filter: 'invert' },
    { name: 'Gmail',     bg: '#fff',    slug: 'gmail',            filter: null },
    { name: 'Dropbox',   bg: '#0061ff', slug: 'dropbox',          filter: 'invert' },
    { name: 'Slack',     bg: '#fff',    slug: 'slack',            filter: null },
    { name: 'LinkedIn',  bg: '#0a66c2', slug: 'linkedin',         filter: 'invert' },
    { name: 'Calendar',  bg: '#1a73e8', slug: 'googlecalendar',   filter: 'invert' },
    { name: 'Word',      bg: '#185abd', slug: 'microsoftword',    filter: 'invert' },
    { name: 'Drive',     bg: '#fff',    slug: 'googledrive',      filter: null },
    { name: 'Outlook',   bg: '#0078d4', slug: 'microsoftoutlook', filter: 'invert' },
    { name: 'Notion',    bg: '#fff',    slug: 'notion',           filter: 'black' },
    { name: 'Linear',    bg: '#5e6ad2', slug: 'linear',           filter: 'invert' },
  ];
  const filterFor = (f) => {
    if (f === 'invert') return 'brightness(0) invert(1)';
    if (f === 'black')  return 'brightness(0)';
    return 'none';
  };
  return (
    <section className="bx-section bx-section--center" data-screen-label="03 Integrations">
      <Eyebrow center>WORKS WITH YOUR STACK</Eyebrow>
      <h2 className="bx-h2-display">One Agent. <em>Every App.</em></h2>
      <p className="bx-lede bx-lede--center">
        Connect Brunu to Gmail, Slack, Drive, and 40+ more. It writes, sends, schedules &mdash; so you don&rsquo;t have to.
      </p>
      <div className="bx-applist">
        {apps.map((a,i) => (
          <div key={i} className="bx-applist__cell">
            <div className="bx-applist__icon" style={{background: a.bg}}>
              <img
                src={`https://cdn.jsdelivr.net/npm/simple-icons@11/icons/${a.slug}.svg`}
                alt={a.name}
                width="36" height="36"
                style={{ filter: filterFor(a.filter) }}
              />
            </div>
            <span className="bx-applist__name">{a.name}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

// Brand logo SVGs (simplified, recognizable, drawn from official marks)
function ImessageLogo() {
  return (
    <svg viewBox="0 0 64 64" width="40" height="40" aria-hidden="true">
      <path d="M32 12c-12.7 0-23 8.5-23 19 0 6 3.4 11.3 8.7 14.7-.5 1.9-1.7 4.6-4 6.9-.5.5-.2 1.4.5 1.4 4.4-.1 8.4-1.6 11.3-3.3 2 .4 4.2.6 6.5.6 12.7 0 23-8.5 23-19S44.7 12 32 12z" fill="#fff"/>
    </svg>
  );
}
function XLogo() {
  return (
    <svg viewBox="0 0 24 24" width="26" height="26" aria-hidden="true" fill="#fff">
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
    </svg>
  );
}
function GmailLogo() {
  return (
    <svg viewBox="0 0 64 48" width="36" height="28" aria-hidden="true">
      <path d="M6 4 L32 24 L58 4 L58 42 Q58 44 56 44 L48 44 L48 18 L32 30 L16 18 L16 44 L8 44 Q6 44 6 42 Z" fill="#ea4335"/>
      <path d="M48 44 L56 44 Q58 44 58 42 L58 4 L48 11 Z" fill="#fbbc04"/>
      <path d="M6 4 L6 42 Q6 44 8 44 L16 44 L16 11 Z" fill="#34a853"/>
      <path d="M16 11 L32 23 L48 11 L48 4 L6 4 Z" fill="#4285f4"/>
      <path d="M16 4 L32 16 L48 4 Z" fill="#c5221f"/>
    </svg>
  );
}
function DropboxLogo() {
  return (
    <svg viewBox="0 0 64 64" width="32" height="32" aria-hidden="true" fill="#fff">
      <path d="M16 12 L4 22 L16 32 L28 22 Z M48 12 L36 22 L48 32 L60 22 Z M16 36 L4 46 L16 56 L28 46 Z M48 36 L36 46 L48 56 L60 46 Z" />
    </svg>
  );
}
function SlackLogo() {
  return (
    <svg viewBox="0 0 64 64" width="36" height="36" aria-hidden="true">
      <rect x="14" y="36" width="14" height="6" rx="3" fill="#36c5f0"/>
      <rect x="14" y="14" width="6" height="14" rx="3" fill="#2eb67d"/>
      <rect x="36" y="22" width="14" height="6" rx="3" fill="#ecb22e"/>
      <rect x="44" y="22" width="6" height="14" rx="3" fill="#e01e5a"/>
      <rect x="22" y="44" width="6" height="14" rx="3" fill="#36c5f0"/>
      <rect x="36" y="36" width="14" height="6" rx="3" fill="#2eb67d"/>
      <rect x="14" y="22" width="14" height="6" rx="3" fill="#e01e5a"/>
      <rect x="36" y="14" width="6" height="14" rx="3" fill="#ecb22e"/>
    </svg>
  );
}
function LinkedinLogo() {
  return (
    <svg viewBox="0 0 64 64" width="34" height="34" aria-hidden="true" fill="#fff">
      <rect x="10" y="22" width="10" height="32" rx="1"/>
      <circle cx="15" cy="13" r="6"/>
      <path d="M26 22h10v5c2-3 5-6 11-6 8 0 11 5 11 14v19h-10V37c0-5-2-8-6-8s-7 3-7 8v17H26z"/>
    </svg>
  );
}
function CalendarLogo() {
  return (
    <svg viewBox="0 0 64 64" width="34" height="34" aria-hidden="true">
      <rect x="8" y="14" width="48" height="44" rx="4" fill="#fff"/>
      <rect x="8" y="14" width="48" height="10" fill="#1a73e8"/>
      <text x="32" y="48" textAnchor="middle" fontSize="22" fontWeight="700" fill="#1a73e8">31</text>
    </svg>
  );
}
function WordLogo() {
  return (
    <svg viewBox="0 0 64 64" width="36" height="36" aria-hidden="true" fill="#fff">
      <text x="32" y="44" textAnchor="middle" fontSize="32" fontWeight="800" fontStyle="italic">W</text>
    </svg>
  );
}
function DriveLogo() {
  return (
    <svg viewBox="0 0 64 56" width="36" height="32" aria-hidden="true">
      <path d="M22 4 L42 4 L62 38 L52 56 L32 56 Z" fill="#ffba00"/>
      <path d="M22 4 L2 38 L12 56 L32 56 L42 38 Z" fill="#0066da"/>
      <path d="M12 56 L52 56 L62 38 L22 38 Z" fill="#00ac47"/>
      <path d="M22 38 L42 38 L32 20 Z" fill="#fff" opacity="0"/>
    </svg>
  );
}
function OutlookLogo() {
  return (
    <svg viewBox="0 0 64 64" width="34" height="34" aria-hidden="true">
      <rect x="6" y="16" width="36" height="32" rx="2" fill="#fff"/>
      <ellipse cx="24" cy="32" rx="10" ry="11" fill="#0078d4"/>
      <ellipse cx="24" cy="32" rx="5" ry="6" fill="#fff"/>
      <path d="M42 24 L58 16 L58 48 L42 40 Z" fill="#50d9ff"/>
    </svg>
  );
}
function NotionLogo() {
  return (
    <svg viewBox="0 0 64 64" width="32" height="32" aria-hidden="true" fill="#000">
      <path d="M14 12 L42 10 L52 16 L52 50 L46 54 L18 56 L12 50 L12 18 Z" fill="#fff" stroke="#000" strokeWidth="2"/>
      <path d="M22 22 L22 44 M22 22 L40 44 M40 22 L40 44" stroke="#000" strokeWidth="3" fill="none" strokeLinecap="round"/>
    </svg>
  );
}
function LinearLogo() {
  return (
    <svg viewBox="0 0 64 64" width="34" height="34" aria-hidden="true" fill="#fff">
      <path d="M8 38 L26 56 M8 28 L36 56 M8 18 L46 56 M12 12 L52 52 M22 8 L56 42 M34 8 L56 30 M46 8 L56 18" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" fill="none"/>
    </svg>
  );
}

// Forecasts — "See What's Coming Next"
function Forecasts() {
  const items = [
    { tag: 'COMMODITIES', headline: 'Hormuz Blockade Tightens: US naval restrictions force oil prices above $95/barrel within 21 days', prob: 72 },
    { tag: 'GEOPOLITICAL', headline: 'Italy Splinters Further: EU defense cooperation fractures as 3+ members follow Italy\u2019s pact suspension within 35 days', prob: 62 },
    { tag: 'MARKETS', headline: 'Fed cuts 50bps in emergency move as labor data confirms recession setpoint', prob: 41 },
  ];
  return (
    <section id="forecasts" className="bx-section bx-section--center" data-screen-label="04 Forecasts">
      <Eyebrow center>WORLD-FIRST</Eyebrow>
      <h2 className="bx-h2-display">See What&rsquo;s <em>Coming Next.</em></h2>
      <p className="bx-lede bx-lede--center">
        The only AI-run forecast channel on Earth. Oil, elections, markets &mdash; with live probabilities you can act on.
      </p>

      <div className="bx-forecast-stack">
        {items.map((f, i) => (
          <article key={i} className="bx-forecast">
            <div className="bx-forecast__head">
              <span className="bx-forecast__brand">
                <span className="bx-forecast__avatar">B</span>
                <span>Brunu &middot; AI</span>
              </span>
              <span className="bx-forecast__date">Apr {17 - i*2}, 2026</span>
            </div>
            <div className="bx-forecast__body">
              <span className="bx-forecast__tag">{f.tag}</span>
              <h4 className="bx-forecast__h">{f.headline}</h4>
              <p className="bx-forecast__sub">Live signal feed continuously recalibrating &middot; {f.prob > 60 ? 'Multiple corroborating alerts' : 'Recent signals trending'}</p>
            </div>
            <div className="bx-forecast__gauge">
              <Gauge value={f.prob} />
              <span className="bx-forecast__steady">Steady &middot; {Math.floor(f.prob*60)} votes &middot; {20+i*4}d {3+i}h left</span>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function Gauge({ value }) {
  const r = 28, c = 2 * Math.PI * r;
  const off = c * (1 - value/100);
  return (
    <div className="bx-gauge">
      <svg viewBox="0 0 64 64" width="64" height="64">
        <circle cx="32" cy="32" r={r} fill="none" stroke="rgba(10,15,25,0.12)" strokeWidth="6" />
        <circle cx="32" cy="32" r={r} fill="none" stroke="#0a0a0a" strokeWidth="6"
          strokeDasharray={c} strokeDashoffset={off} strokeLinecap="round"
          transform="rotate(-90 32 32)" />
      </svg>
      <span className="bx-gauge__num">{value}%</span>
    </div>
  );
}

// Global Pulse — dark mode news section with REAL topical photos
function Pulse() {
  const stories = [
    {
      tag: 'SECURITY',
      text: 'U.S. Strikes Kharg Island as Trump Raises Iran Threats to Apocalyptic Levels',
      img: 'v4/news-kharg.jpg',
      src: 'AL JAZ', age: '2h ago',
    },
    {
      tag: 'POLITICS',
      text: 'Pentagon Stays Mum on Strike, Even As Trump Boasts of Iran Rescue',
      img: 'v4/news-pentagon.jpg',
      src: 'REUTERS', age: '4h ago',
    },
    {
      tag: 'INFRASTRUCTURE',
      text: 'How AI is being used to target asymmetric infrastructure',
      img: 'v4/news-aicyber.jpg',
      src: 'WIRED', age: '6h ago',
    },
    {
      tag: 'POLICY',
      text: 'Are war crimes being committed in the Middle East war?',
      img: 'v4/news-warcrime.jpg',
      src: 'AP', age: '8h ago',
    },
    {
      tag: 'EUROPE',
      text: 'Historic building in Ukraine up in flames after Russia drone attack',
      img: 'v4/news-ukraine.jpg',
      src: 'BBC', age: '11h ago',
    },
    {
      tag: 'POLITICS',
      text: 'An \u2018eerie still\u2019 in Tehran amid Trump\u2019s apocalyptic threats',
      img: 'v4/news-tehran.jpg',
      src: 'NYT', age: '14h ago',
    },
  ];
  return (
    <section id="pulse" className="bx-pulse" data-screen-label="05 Pulse">
      <div className="bx-pulse__inner">
        <Eyebrow center light>GLOBAL PULSE</Eyebrow>
        <h2 className="bx-h2-display bx-h2-display--light">Know Before <em>It Happens.</em></h2>
        <p className="bx-lede bx-lede--center bx-lede--light">
          The feed you don&rsquo;t need to doom-scroll. Brunu surfaces what matters, ranked by what&rsquo;s about to move the world.
        </p>

        <div className="bx-pulse__grid">
          {stories.map((s, i) => (
            <article key={i} className="bx-pulse__card bx-pulse__card--noimg">
              <div className="bx-pulse__copy">
                <span className="bx-pulse__tag">{s.tag}</span>
                <p className="bx-pulse__text">{s.text}</p>
                <span className="bx-pulse__age">{s.src} &middot; {s.age}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// Bet Against The Bot — community forecasts
function Community() {
  return (
    <section className="bx-section" data-screen-label="06 Community">
      <div className="bx-split">
        <div className="bx-split__copy">
          <Eyebrow>CHALLENGE THE AI</Eyebrow>
          <h2 className="bx-h2">Bet Against <em>The Bot.</em></h2>
          <p className="bx-lede">
            Brunu reads the world. You decide if it&rsquo;s right. Set your own forecast, debate the AI, watch the crowd vote.
          </p>
          <ul className="bx-checklist">
            <li>Submit a counter-forecast with evidence</li>
            <li>Watch live probabilities recalibrate as crowd weighs in</li>
            <li>Earn a creator badge for accurate, repeatable calls</li>
            <li>Apply to Brunu&rsquo;s Content Creator program</li>
          </ul>
          <a href="#" className="bx-btn bx-btn--primary">Subscribe &amp; Start Creating</a>
          <a href="#" className="bx-btn bx-btn--ghost">Apply as a Creator</a>
        </div>
        <div className="bx-split__visual">
          <DebateGlyph />
        </div>
      </div>
    </section>
  );
}

function DebateGlyph() {
  // Big primary gauge + crowd consensus bar + counter-forecast feed.
  const brunu = 78;
  const r = 80, c = 2 * Math.PI * r;
  const off = c * (1 - brunu/100);
  return (
    <div className="bx-debate">
      <div className="bx-debate__top">
        <div className="bx-debate__gauge">
          <svg viewBox="0 0 200 200" width="180" height="180" aria-hidden="true">
            <circle cx="100" cy="100" r={r} fill="none" stroke="rgba(10,10,10,0.10)" strokeWidth="12" />
            <circle cx="100" cy="100" r={r} fill="none" stroke="#0a0a0a" strokeWidth="12"
              strokeDasharray={c} strokeDashoffset={off} strokeLinecap="round"
              transform="rotate(-90 100 100)" />
          </svg>
          <div className="bx-debate__num">{brunu}<span>%</span></div>
        </div>
        <div className="bx-debate__qmeta">
          <div className="bx-debate__qlabel">FORECAST</div>
          <div className="bx-debate__q">Will Brent crude break $95 within 21 days?</div>
          <div className="bx-debate__bar">
            <div className="bx-debate__bar-row">
              <span>Crowd consensus</span>
              <span className="bx-debate__bar-num">71%</span>
            </div>
            <div className="bx-debate__bar-track">
              <div className="bx-debate__bar-fill" style={{width: '71%'}}></div>
              <div className="bx-debate__bar-marker" style={{left: '78%'}} title="Brunu"></div>
            </div>
            <div className="bx-debate__bar-meta">
              <span>1,284 votes</span>
              <span>3d 14h left</span>
            </div>
          </div>
        </div>
      </div>

      <div className="bx-debate__feed">
        <div className="bx-debate__msg">
          <span className="bx-debate__avatar" style={{background:'#d97706'}}>D</span>
          <div>
            <div className="bx-debate__who">@devonk &middot; <span>2m</span></div>
            <div className="bx-debate__text">Sooner than 21d &mdash; new tanker data Tue.</div>
          </div>
        </div>
        <div className="bx-debate__msg bx-debate__msg--ai">
          <span className="bx-debate__avatar bx-debate__avatar--ai">B</span>
          <div>
            <div className="bx-debate__who">Brunu &middot; <span>just now</span></div>
            <div className="bx-debate__text">Recalibrating. Weight +6% on near-term window.</div>
          </div>
        </div>
        <div className="bx-debate__msg">
          <span className="bx-debate__avatar" style={{background:'#0ea5e9'}}>P</span>
          <div>
            <div className="bx-debate__who">@priyas &middot; <span>now</span></div>
            <div className="bx-debate__text">Disagree &mdash; OPEC signals say later.</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Markets section — "Every Number Has a Story"
function Markets() {
  return (
    <section id="markets" className="bx-section bx-section--center" data-screen-label="07 Markets">
      <Eyebrow center>MARKETS</Eyebrow>
      <h2 className="bx-h2-display">Every Number <em>Has a Story.</em></h2>
      <p className="bx-lede bx-lede--center">
        Live prices are just the start. Brunu reads the signal &mdash; why oil&rsquo;s surging, what the VIX is saying, where it&rsquo;s headed.
      </p>

      <div className="bx-markets">
        <div className="bx-markets__row">
          <span className="bx-markets__sym">S&amp;P 500</span>
          <span className="bx-markets__price">7,108.14</span>
          <span className="bx-markets__chg bx-markets__chg--down">&minus;16.83 &nbsp;&minus;0.24%</span>
        </div>
        <Spark direction="up-then-down" />
        <div className="bx-markets__cards">
          <div className="bx-markets__card"><div className="bx-markets__lbl">OPEN</div><div className="bx-markets__val">7,121.83</div></div>
          <div className="bx-markets__card"><div className="bx-markets__lbl">HIGH</div><div className="bx-markets__val">7,158.06</div></div>
          <div className="bx-markets__card"><div className="bx-markets__lbl">LOW</div><div className="bx-markets__val">7,081.83</div></div>
          <div className="bx-markets__card"><div className="bx-markets__lbl">PREV CLOSE</div><div className="bx-markets__val">7,124.97</div></div>
        </div>
        <div className="bx-markets__story">
          <div className="bx-markets__storylbl">BRUNU&rsquo;S READ</div>
          <p>Stocks slipped Monday as tensions between the U.S. and Iran escalated over the weekend, with the S&amp;P 500 shedding 0.24% to close at 7,108.14, snapping the Nasdaq&rsquo;s 13-day winning streak. The earlier Iran ceasefire and reopening of the Strait of Hormuz had pulled crude oil down more than 13% on the week, removing the war premium from stocks &mdash; but the weekend escalation reversed those geopolitical gains.</p>
        </div>
      </div>
    </section>
  );
}

function Spark({ direction }) {
  return (
    <svg viewBox="0 0 800 200" width="100%" height="200" preserveAspectRatio="none" aria-hidden="true" className="bx-spark">
      <path d="M 0 140 Q 80 120 140 105 Q 220 85 300 70 Q 380 55 460 50 Q 540 60 620 90 Q 700 140 800 165" stroke="#0a0a0a" strokeWidth="2" fill="none" />
      <path d="M 0 140 Q 80 120 140 105 Q 220 85 300 70 Q 380 55 460 50 Q 540 60 620 90 Q 700 140 800 165 L 800 200 L 0 200 Z" fill="#0a0a0a" opacity="0.06" />
    </svg>
  );
}

// Crypto / multi-asset
function Crypto() {
  const rows = [
    { rank: 1, sym: 'Bitcoin',  ticker: 'BTC',  cap: '$77,449.00', mc: '1650.0B', chg: '+3.34%' },
    { rank: 2, sym: 'Ethereum', ticker: 'ETH',  cap: '$2,430.31',  mc: '293.4B',  chg: '+2.79%' },
    { rank: 3, sym: 'Tether',   ticker: 'USDT', cap: '$1.00',      mc: '185.9B',  chg: '+0.02%' },
    { rank: 4, sym: 'XRP',      ticker: 'XRP',  cap: '$1.48',      mc: '91.3B',   chg: '+2.35%' },
    { rank: 5, sym: 'BNB',      ticker: 'BNB',  cap: '$642.24',    mc: '85.6B',   chg: '+1.55%' },
  ];
  return (
    <section className="bx-section bx-section--center" data-screen-label="08 Crypto">
      <Eyebrow center>CRYPTO</Eyebrow>
      <h2 className="bx-h2-display">Watch. Analyze. <em>Stay Ahead.</em></h2>
      <p className="bx-lede bx-lede--center">
        Brunu&rsquo;s live analysis. Real-time insights. All the crypto markets &mdash; in one place.
      </p>
      <div className="bx-crypto">
        <div className="bx-crypto__head">
          <span>TOP CRYPTO BY MARKET CAP</span>
          <span className="bx-crypto__live">CMC100 &middot; LIVE</span>
        </div>
        {rows.map(r => (
          <div key={r.rank} className="bx-crypto__row">
            <span className="bx-crypto__rank">#{r.rank}</span>
            <span className="bx-crypto__dot" data-sym={r.ticker}></span>
            <div className="bx-crypto__name">
              <div>{r.sym}</div>
              <div className="bx-crypto__sub">{r.ticker}</div>
            </div>
            <div className="bx-crypto__mc">
              <div className="bx-crypto__sub">MCap</div>
              <div>{r.mc}</div>
            </div>
            <div className="bx-crypto__price">
              <div>{r.cap}</div>
              <div className="bx-crypto__chg">{r.chg}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// Pricing
function Pricing() {
  const [annual, setAnnual] = React.useState(false);
  const tiers = [
    { id: 'free',  name: 'Welcome', monthly: 0,   annual: 0,   tag: 'A simple way to experience the companion.', limit: '5 msgs/day · Pulse preview · No memory', cta: 'Start free', plan: 'free' },
    { id: 'lite',  name: 'Lite',    monthly: 15,  annual: 13,  tag: 'For curious minds who want more than a chatbot.', limit: '150/mo · Full Pulse · Live markets · 5 artifacts', cta: 'Get Lite', plan: 'lite' },
    { id: 'bruno', name: 'Brunu',   monthly: 29,  annual: 24,  tag: 'The AI you actually keep.', limit: '300/mo · Memory · 10 artifacts', cta: 'Get Brunu', plan: 'bruno', popular: true },
    { id: 'pro',   name: 'Pro',     monthly: 85,  annual: 71,  tag: 'For people who want the full picture.', limit: '1,500/mo · Deep research + agent · Voice', cta: 'Get Pro', plan: 'pro' },
    { id: 'max',   name: 'Max',     monthly: 189, annual: 158, tag: 'For organizations where decisions depend on being right.', limit: '5,000/mo · Full API · White-label', cta: 'Talk to us', plan: 'max' },
  ];
  return (
    <section id="pricing" className="bx-section bx-section--center" data-screen-label="09 Pricing">
      <Eyebrow center>PRICING</Eyebrow>
      <h2 className="bx-h2-display">Pick the depth <em>you need.</em></h2>
      <div className="bx-pricing__toggle">
        <button className={!annual ? 'is-on' : ''} onClick={() => setAnnual(false)}>Monthly</button>
        <button className={annual ? 'is-on' : ''} onClick={() => setAnnual(true)}>
          Annual <span className="bx-pricing__save">&minus;17%</span>
        </button>
      </div>
      <div className="bx-tiers">
        {tiers.map(t => {
          const price = annual ? t.annual : t.monthly;
          const href = "https://www.brunu.ai/waitlist?plan=" + t.plan;
          return (
            <div key={t.id} className={"bx-tier" + (t.popular ? " bx-tier--popular" : "")}>
              {t.popular && <div className="bx-tier__badge">Most popular</div>}
              <p className="bx-tier__name">{t.name}</p>
              <div className="bx-tier__price">
                <span className="bx-tier__amt">${price}</span>
                <span className="bx-tier__per">{price === 0 ? 'forever' : '/ mo'}</span>
              </div>
              <p className="bx-tier__tag">{t.tag}</p>
              <a href={href} className={"bx-btn " + (t.popular ? "bx-btn--primary" : "bx-btn--ghost")}>{t.cta}</a>
              <div className="bx-tier__limit">{t.limit}</div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// Final CTA
function FinalCTA() {
  return (
    <section className="bx-finalcta" data-screen-label="10 Final CTA">
      <Eyebrow center>READY?</Eyebrow>
      <h2 className="bx-finalcta__h">Know more. <em>Worry less.</em></h2>
      <div className="bx-finalcta__cta">
        <a href="https://www.brunu.ai/chat" className="bx-btn bx-btn--primary bx-btn--lg">Open Brunu</a>
        <a href="https://apps.apple.com/us/app/brunu-ai/id6761738315" className="bx-btn bx-btn--primary bx-btn--lg">Download for iOS</a>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    { h: 'Product', items: [
      {l:'Agent',h:'v4-agent.html'},
      {l:'Forecasts',h:'v4-forecasts.html'},
      {l:'Chat',h:'https://www.brunu.ai/chat'},
      {l:'Markets',h:'https://www.brunu.ai/finance'},
    ] },
    { h: 'Use cases', items: [
      {l:'Research',h:'https://etra.global/case-studies'},
      {l:'Analysis',h:'https://etra.global/case-studies'},
      {l:'Writing',h:'https://etra.global/case-studies'},
      {l:'Schedule',h:'https://etra.global/case-studies'},
    ] },
    { h: 'Company', items: [
      {l:'About',h:'https://etra.global/'},
      {l:'Etra',h:'https://etra.global/'},
      {l:'Contact',h:'https://etra.global/'},
      {l:'Press',h:'https://etra.global/'},
    ] },
    { h: 'Legal', items: [
      {l:'Terms',h:'https://etra.global/'},
      {l:'Privacy',h:'https://etra.global/'},
      {l:'Cookies',h:'https://etra.global/'},
    ] },
  ];
  return (
    <footer className="bx-footer" data-screen-label="11 Footer">
      <div className="bx-footer__inner">
        <div className="bx-footer__brand">
          <div className="bx-nav__logo">
            <span>Brunu AI</span>
          </div>
          <p>An Etra company.<br/>Bringing the world to you.</p>
        </div>
        <div className="bx-footer__cols">
          {cols.map(c => (
            <div key={c.h}>
              <div className="bx-footer__h">{c.h}</div>
              <ul>{c.items.map(i => <li key={i.l}><a href={i.h}>{i.l}</a></li>)}</ul>
            </div>
          ))}
        </div>
      </div>
      <div className="bx-footer__base">
        <span>&copy; 2026 Etra &middot; All rights reserved</span>
        <span className="bx-footer__disc">
          Brunu is in beta. Forecasts are AI-generated analytical outputs, continuously recalibrated. Not financial advice.
        </span>
      </div>
    </footer>
  );
}

function App() {
  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Agentic />
        <Integrations />
        <Forecasts />
        <Pulse />
        <Community />
        <Markets />
        <Crypto />
        <FinalCTA />
      </main>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);