// sections-final-3.jsx — Page sections (v3): Nav, Hero, Ticker, Mission, Portfolio, Leaders, Strip, Footer

const { useEffect, useRef, useState } = React;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    const onResize = () => { if (window.innerWidth > 780) setOpen(false); };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  const links = [
    { href: "#mission", label: "Mission" },
    { href: "#portfolio", label: "Companies" },
    { href: "#leadership", label: "Team" },
    { href: "#careers", label: "Careers" }];

  return (
    <header className={`nav ${scrolled ? "scrolled" : ""} ${open ? "menu-open" : ""}`}>
      <a href="#top" className="nav-logo" onClick={() => setOpen(false)} aria-label="RIA — home">
        <img src="assets/RIA Logo.png" alt="RIA" className="nav-logo-img" />
      </a>
      <nav className="nav-links">
        {links.map((l) => <a key={l.href} href={l.href}>{l.label}</a>)}
      </nav>
      <div className="nav-right">
        <a href="#contact" className="nav-cta" onClick={() => setOpen(false)}>
          Get in touch
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 9L9 3M9 3H4M9 3V8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
        </a>
        <button
          type="button"
          className="nav-burger"
          aria-label={open ? "Close menu" : "Open menu"}
          aria-expanded={open}
          onClick={() => setOpen((o) => !o)}>
          <span /><span /><span />
        </button>
      </div>
      <div className="nav-sheet" data-open={open}>
        {links.map((l) =>
          <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>
        )}
      </div>
    </header>);
}

function Ticker() {
  const items = [
    "Insurance, rebuilt from first principles",
    "Healthcare focused on outcomes",
    "AI at the core, not the edges",
    "Human‑centric by design",
    "Operator‑led, investor‑backed"];

  const row =
    <span>
      {items.map((t, i) =>
        <React.Fragment key={i}>
          {t}
          <span className="sep" />
        </React.Fragment>
      )}
    </span>;

  return (
    <div className="ticker" aria-hidden="true">
      <div className="ticker-track">{row}{row}{row}</div>
    </div>);
}

function Mission() {
  return (
    <section className="mission" id="mission">
      <div className="wrap">
        <div className="eyebrow"><span className="dot" style={{ background: "var(--accent-3)" }} />Mission</div>
        <p className="mission-statement reveal">
          We are a <em>AI‑native holding company</em> for companies in insurance — building, buying, and scaling
          companies that will manage risk for the next century.
        </p>
        <div className="mission-grid">
          <div className="m-item reveal">
            <div className="m-num">01 · Build</div>
            <h3 className="m-h">AI‑native companies</h3>
            <p className="m-p">We operate companies where AI isn't bolted on — it's the operating system. Shipping products that matter to policyholders.</p>
          </div>
          <div className="m-item reveal d1">
            <div className="m-num">02 · Compound</div>
            <h3 className="m-h">Shared AI substrate</h3>
            <p className="m-p">Data, models, learning, and technology compound across our companies. Every new company makes the others smarter.</p>
          </div>
          <div className="m-item reveal d2">
            <div className="m-num">03 · Transform</div>
            <h3 className="m-h">A $7T industry, reimagined</h3>
            <p className="m-p">Insurance and healthcare reimagined for the world. We are rewiring how they're designed, distributed, and delivered.</p>
          </div>
        </div>
      </div>
    </section>);
}

function Portfolio({ accent }) {
  const cos = [
    {
      num: "01",
      name: "GetRIA Technologies",
      tag: "Innovating across the insurance value chain.",
      logo: "assets/getria-logo.png",
      desc: "An Insurance Vertical AI company reimagining how core insurance platforms are built to serve business needs in a rapidly changing world. Our platform serves the entire insurance value chain across Life, Health, and P&C lines.",
      sector: "Insurance Core · Platform",
      url: "https://www.getriatech.in"
    },
    {
      num: "02",
      name: "VisionSure",
      tag: "Total vision care, reimagined.",
      logo: "assets/visionsure-logo.png",
      desc: "VisionSure helps Indians solve for gaps in eyewear and eyecare needs by providing access to high quality, organised, and better priced healthcare services.",
      sector: "Healthcare · Vision",
      url: "https://bevisionsure.com"
    },
    {
      num: "03",
      name: "SymphonyFlow",
      tag: "AI‑driven care coordination for smarter healthcare.",
      logo: "assets/symphony-logo.png",
      desc: "A healthcare AI platform designed to optimize care coordination, improve patient outcomes, and streamline clinical workflows and administrative workflows through intelligent automation.",
      sector: "Healthcare · Care Coordination",
      url: "https://www.symphonyflow.com"
    }];

  return (
    <section id="portfolio">
      <div className="wrap">
        <div className="sect-head">
          <div className="lbl">
            <div className="eyebrow"><span className="dot" />Companies</div>
          </div>
          <h2 className="reveal" style={{ maxWidth: "none" }}><span style={{ whiteSpace: "nowrap" }}>Multiple companies,</span><br /><em>one thesis</em>.</h2>
        </div>

        <div className="port-grid">
          {cos.map((c, i) =>
            <a key={c.num} href={c.url} target="_blank" rel="noreferrer" className={`pcard reveal d${i}`}>
              <div className="pcard-visual">
                <div className="pcard-logo">
                  <img src={c.logo} alt={c.name} loading="lazy" className="pcard-logo-tinted" />
                </div>
              </div>
              <div className="pcard-body">
                <div className="pcard-num">{c.num} · Company</div>
                <h3 className="pcard-name">{c.name}</h3>
                <p className="pcard-tag">{c.tag}</p>
                <p className="pcard-desc">{c.desc}</p>
                <div className="pcard-foot">
                  <span className="sector">{c.sector}</span>
                  <span className="pcard-arrow" aria-hidden="true">
                    <svg viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
                  </span>
                </div>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);
}

function Leadership({ accent }) {
  const people = [
    {
      name: "Prerak Sethi",
      role: "Founder",
      photo: "assets/Prerak-112ea6f9.png",
      summary: "Decade+ in InsurTech — distribution, product design, and the technology underneath.",
      education: "Kellogg MBA · UMich Computer Engineering",
      linkedin: "https://www.linkedin.com/in/preraksethi/"
    },
    {
      name: "Nipun Virmani",
      role: "Founder",
      photo: "assets/Nipun-63d8d307.png",
      summary: "Built trading systems at Goldman Sachs before turning to product entrepreneurship in India.",
      education: "MIT Sloan MBA · UMich Computer Engineering",
      linkedin: "https://www.linkedin.com/in/nipunvirmani/"
    },
    {
      name: "Mukul Tuli",
      role: "Founder",
      photo: "assets/Mukul-156f2bed.png",
      summary: "Strategy Consulting at McKinsey, Corporate Strategy at Essilor, and then tech at Salesforce.",
      education: "Kellogg MBA · IIT Kanpur (Gold Medalist)",
      linkedin: "https://www.linkedin.com/in/mukultuli/"
    }];

  return (
    <section id="leadership">
      <div className="wrap">
        <div className="sect-head">
          <div className="lbl">
            <div className="eyebrow"><span className="dot" />Leadership</div>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>Three founders</div>
          </div>
          <h2 className="reveal">Operators who are <em>building for impact</em>.</h2>
        </div>

        <div className="founder-grid">
          {people.map((p, i) =>
            <div key={p.name} className={`founder-card reveal d${i}`}>
              <div className="founder-photo-wrap">
                <img src={p.photo} alt={p.name} loading="lazy" className="founder-photo-img" />
              </div>
              <div className="founder-role-tag">{p.role}</div>
              <h3 className="founder-name">{p.name}</h3>
              <div className="founder-divider" />
              <p className="founder-summary">{p.summary}</p>
              <p className="founder-edu">{p.education}</p>
              <a className="founder-linkedin" href={p.linkedin} target="_blank" rel="noreferrer">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.61 0 4.27 2.38 4.27 5.47v6.27zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45C23.2 24 24 23.23 24 22.28V1.72C24 .77 23.2 0 22.22 0z" /></svg>
                LinkedIn
                <svg width="10" height="10" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M3 9L9 3M9 3H4M9 3V8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
              </a>
            </div>
          )}
        </div>
      </div>
    </section>);
}

function Investors() {
  const firms = [
    { src: "assets/beenext_logo-1.webp", alt: "BeeNext", url: "https://www.beenext.com" },
    { src: "assets/logo_leo.webp", alt: "Leo Capital", url: "https://leo.capital" },
    { src: "assets/logo-blue.svg", alt: "Rainmatter by Zerodha", url: "https://rainmatter.com" }];

  return (
    <section id="investors">
      <div className="wrap">
        <div className="sect-head">
          <div className="lbl">
            <div className="eyebrow"><span className="dot" />Investors</div>
          </div>
          <h2 className="reveal"><span style={{ whiteSpace: "nowrap" }}>Backed with</span> <em>conviction</em>.</h2>
        </div>

        <div className="inv-grid reveal">
          {firms.map((f) =>
            <a key={f.url} className="inv-cell" href={f.url} target="_blank" rel="noreferrer">
              <img className="inv-img" src={f.src} alt={f.alt} loading="lazy" />
            </a>
          )}
        </div>
      </div>
    </section>);
}

/* ── Culture & Careers strip — "Say hello" button removed ── */
function Strip() {
  return (
    <section className="strip" id="careers">
      <div className="wrap strip-inner">
        <div>
          <div className="eyebrow reveal" style={{ marginBottom: 18 }}><span className="dot" />Culture & Careers</div>
          <h2 className="reveal d1">We build with <em>thought</em><br />and <em>boldness</em>.</h2>
        </div>
        <div className="strip-right">
          <p className="reveal d2">
            Restless thinkers, compassionate doers, deeply committed technologists — redefining insurance
            and healthcare from the inside out. We operate across India and USA.
          </p>
          <a href="#portfolio" className="btn reveal d3">
            See our companies
            <svg viewBox="0 0 12 12" fill="none"><path d="M3 9L9 3M9 3H4M9 3V8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
          </a>
        </div>
      </div>
    </section>);
}

function Footer() {
  return (
    <footer id="contact">
      <div className="wrap">
        <div className="f-brand">
          <div className="f-wordmark"><img src="assets/RIA Logo.png" alt="RIA" className="f-wordmark-img" /></div>
          <div className="f-motto"><span className="f-motto-lbl">Our Motto:</span> Never fear. Never stop.</div>
          <p style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase" }}>info@ria.insure</p>
        </div>
        <div>
          <h4>Companies</h4>
          <ul>
            <li><a href="https://www.bevisionsure.com" target="_blank" rel="noreferrer">VisionSure</a></li>
            <li><a href="https://www.getriatech.in" target="_blank" rel="noreferrer">GetRIA Technologies</a></li>
            <li><a href="https://www.symphonyflow.com" target="_blank" rel="noreferrer">SymphonyFlow</a></li>
          </ul>
        </div>
        <div>
          <h4>Company</h4>
          <ul>
            <li><a href="#mission">Mission</a></li>
            <li><a href="#leadership">Leadership</a></li>
            <li><a href="#careers">Careers</a></li>
          </ul>
        </div>
        <div>
          <h4>Offices</h4>
          <ul>
            <li>New Delhi, India</li>
          </ul>
        </div>
      </div>
      <div className="wrap f-bottom">
        <div>© 2026 RIA</div>
        <div className="links">
          <a href="#" data-legal="privacy">Privacy</a>
          <a href="#" data-legal="terms">Terms</a>
        </div>
      </div>
    </footer>);
}

Object.assign(window, { Nav, Ticker, Mission, Portfolio, Leadership, Investors, Strip, Footer });