// AskChief — Homepage
// Visual language from Figma references; content from the doc.

const { useEffect, useRef, useState } = React;

/* ──────────────────────────────────────────────────────────
   Procedural dust trail — particle paths matching Figma
   ────────────────────────────────────────────────────────── */
function useDust(canvasRef, opts) {
  const { path, count: baseCount = 9000, color = [35, 35, 35] } = opts;
  useEffect(() => {
    const cnv = canvasRef.current;
    if (!cnv) return;
    let raf = null, t0 = performance.now();
    let cssW = 0, cssH = 0;
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const ctx = cnv.getContext("2d");
    // On mobile: fewer particles (less visual density), bigger particles (less sub-pixel aliasing).
    const isMobile = window.matchMedia("(max-width: 600px)").matches;
    const count = isMobile ? Math.round(baseCount * 0.35) : baseCount;
    const sizeMul = isMobile ? 1.6 : 1;
    const resize = () => {
      const rect = cnv.getBoundingClientRect();
      cssW = rect.width; cssH = rect.height;
      cnv.width = cssW * dpr;
      cnv.height = cssH * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(cnv);
    const draw = (now) => {
      ctx.clearRect(0, 0, cssW, cssH);
      const W = cssW, H = cssH;
      const elapsed = (now - t0) / 1000;
      let seed = 1;
      const rand = () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; };
      ctx.fillStyle = `rgba(${color[0]}, ${color[1]}, ${color[2]}, 1)`;
      for (let i = 0; i < count; i++) {
        const t = rand();
        const [cx, cy, spread] = path(t, W, H);
        const density = Math.pow(Math.sin(Math.PI * t), 0.6);
        if (rand() > density * 0.92 + 0.08) continue;
        const r1 = (rand() - 0.5) * 2;
        const r2 = (rand() - 0.5) * 2;
        const sgn = Math.sign(r1) || 1;
        const j = sgn * Math.pow(Math.abs(r1), 2.4) * spread * (0.6 + 0.4 * rand());
        const along = r2 * spread * 0.18;
        const drift = Math.sin(elapsed * 0.4 + i * 0.013) * 1.2;
        const px = cx + along + drift;
        const py = cy + j;
        const s = (rand() < 0.03 ? 1.6 + rand() * 1.6 : 0.4 + rand() * 0.9) * sizeMul;
        const a = 0.30 + rand() * 0.55;
        ctx.globalAlpha = a;
        ctx.fillRect(px, py, s, s);
      }
      ctx.globalAlpha = 1;
      raf = requestAnimationFrame(draw);
    };
    const start = () => {
      if (raf != null) return;
      t0 = performance.now();
      raf = requestAnimationFrame(draw);
    };
    const stop = () => {
      if (raf != null) { cancelAnimationFrame(raf); raf = null; }
    };
    const io = new IntersectionObserver(
      ([entry]) => { entry.isIntersecting ? start() : stop(); },
      { rootMargin: "100px" }
    );
    io.observe(cnv);
    return () => { io.disconnect(); ro.disconnect(); stop(); };
  }, []);
}
function agentsPath(t, W, H) {
  const x = -W * 0.05 + t * (W * 1.05);
  const baseY = H * 0.62;
  const lift = Math.pow(Math.max(0, t - 0.78), 2) * H * 1.6;
  const dipUp = Math.pow(Math.max(0, t - 0.55), 1.2) * H * 0.05;
  const y = baseY - lift - dipUp + (1 - t) * H * 0.04;
  const spread = Math.sin(Math.PI * t) * H * 0.18 * (1 - 0.5 * Math.pow(t, 4));
  return [x, y, Math.max(2, spread)];
}
function ctaPath(t, W, H) {
  const x = t * W * 1.05 - W * 0.02;
  const arc = Math.sin(Math.PI * t) * H * 0.18;
  const y = H * 0.18 + t * H * 0.55 - arc;
  const spread = Math.sin(Math.PI * Math.pow(t, 0.7)) * H * 0.10 * (0.6 + 0.4 * (1 - t));
  return [x, y, Math.max(2, spread)];
}
function DustField({ path, count = 9000, color, className }) {
  const ref = useRef(null);
  useDust(ref, { path, count, color });
  return <canvas ref={ref} className={`dust-canvas ${className || ""}`} />;
}

/* ──────────────────────────────────────────────────────────
   Sections
   ────────────────────────────────────────────────────────── */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [hidden, setHidden] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    let lastY = window.scrollY;
    let ticking = false;
    const update = () => {
      const y = window.scrollY;
      setScrolled(y > 20);
      // Auto-hide: hide when scrolling down past 120px, show when scrolling up.
      // Always show near the top of the page so it never feels lost.
      if (y < 100) {
        setHidden(false);
      } else if (y > lastY + 4) {
        setHidden(true);
      } else if (y < lastY - 4) {
        setHidden(false);
      }
      lastY = y;
      ticking = false;
    };
    const onScroll = () => {
      if (!ticking) { requestAnimationFrame(update); ticking = true; }
    };
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const close = () => setMenuOpen(false);
  return (
    <nav className={`nav${scrolled ? " nav--scrolled" : ""}${menuOpen ? " nav--menu-open" : ""}${hidden && !menuOpen ? " nav--hidden" : ""}`}>
      <div className="nav__inner">
        <div className="nav__left">
          <a href="#agents" className="nav__link nav__link--desktop">ABOUT</a>
          <button
            type="button"
            className="nav__hamburger"
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(!menuOpen)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
        <div className="nav__center">
          <img src="assets/wordmark.svg" alt="AskChief" />
        </div>
        <div className="nav__right">
          <a href="#demo" className="nav__link nav__link--desktop">GET DEMO</a>
          <a href="https://app.askchief.ai/login" className="nav__link nav__link--desktop">LOG IN</a>
        </div>
      </div>
      <div className="nav__menu" onClick={close} aria-hidden={!menuOpen}>
        <div className="nav__menu-inner" onClick={(e) => e.stopPropagation()}>
          <a href="#agents" className="nav__menu-link" onClick={close}>ABOUT</a>
          <a href="#demo" className="nav__menu-link" onClick={close}>GET DEMO</a>
          <a href="https://app.askchief.ai/login" className="nav__menu-link" onClick={close}>LOG IN</a>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  const heroVideoRef = useRef(null);
  const heroHasLoopedRef = useRef(false);
  useEffect(() => {
    const v = heroVideoRef.current;
    if (!v) return;
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    const FADE_SEC = 1.1;

    const applyLoopCrossfade = () => {
      if (mq.matches || !v.duration || !isFinite(v.duration)) return;
      const d = v.duration;
      const t = v.currentTime;
      const left = d - t;
      if (left <= FADE_SEC && left >= 0) {
        v.style.opacity = String(Math.max(0, Math.min(1, left / FADE_SEC)));
      } else if (heroHasLoopedRef.current && t < FADE_SEC) {
        v.style.opacity = String(Math.max(0, Math.min(1, t / FADE_SEC)));
      } else {
        v.style.opacity = "1";
      }
    };

    const onEnded = () => {
      if (mq.matches) return;
      v.style.opacity = "0";
      heroHasLoopedRef.current = true;
      try {
        v.currentTime = 0;
      } catch (_) {}
      v.play().catch(() => {});
    };

    const syncMq = () => {
      if (mq.matches) {
        v.pause();
        v.style.opacity = "1";
      } else {
        v.play().catch(() => {});
      }
    };

    v.addEventListener("timeupdate", applyLoopCrossfade);
    v.addEventListener("ended", onEnded);
    mq.addEventListener("change", syncMq);
    syncMq();

    // Pause video decoding when the hero is scrolled off-screen — but only
    // after native HTML autoplay has actually started. iOS Safari treats
    // pre-autoplay programmatic pause/play calls as a "lost gesture" and shows
    // a play button instead of autoplaying. Gating on the `playing` event keeps
    // the perf optimization while not interfering with the autoplay handshake.
    let hasPlayed = false;
    const markPlayed = () => { hasPlayed = true; };
    v.addEventListener("playing", markPlayed, { once: true });
    const io = new IntersectionObserver(([entry]) => {
      if (mq.matches || !hasPlayed) return;
      if (entry.isIntersecting) {
        if (v.paused) v.play().catch(() => {});
      } else {
        v.pause();
      }
    }, { rootMargin: "100px" });
    io.observe(v);

    return () => {
      io.disconnect();
      v.removeEventListener("playing", markPlayed);
      v.removeEventListener("timeupdate", applyLoopCrossfade);
      v.removeEventListener("ended", onEnded);
      mq.removeEventListener("change", syncMq);
      v.style.opacity = "";
    };
  }, []);
  return (
    <section className="hero">
      <div className="hero__frame">
        <div className="hero__photo">
          <video
            ref={heroVideoRef}
            className="hero__video"
            autoPlay
            muted
            playsInline
            preload="metadata"
            poster="assets/hero-bridge.png"
            aria-hidden="true"
          >
            <source src="assets/hero-background.mp4?v=seedance2" type="video/mp4" />
          </video>
        </div>
        <div className="hero__content">
          <h1 className="hero__title">{"Give your team\nan unfair advantage."}</h1>
          <p className="hero__sub">{"Two AI agents.\nOne for technical. One for HSQE.\nYour team, multiplied."}</p>
          <a href="#demo" className="btn-pill">REQUEST DEMO</a>
        </div>
      </div>
    </section>
  );
}

function AgentCard({ logo, wordmark, video, title, sub, items, variant }) {
  const videoRef = useRef(null);
  const variantClass = variant ? ` agent-card--${variant}` : "";

  const handleEnter = () => {
    const v = videoRef.current;
    if (!v) return;
    try { v.currentTime = 0; } catch (_) {}
    const p = v.play();
    if (p && typeof p.catch === "function") p.catch(() => {});
  };
  const handleLeave = () => {
    const v = videoRef.current;
    if (!v) return;
    v.pause();
    try { v.currentTime = 0; } catch (_) {}
  };

  return (
    <article
      className={`${video ? "agent-card agent-card--has-video" : "agent-card"}${variantClass}`}
      tabIndex={0}
      aria-label={title}
      onMouseEnter={video ? handleEnter : undefined}
      onMouseLeave={video ? handleLeave : undefined}
    >
      <div className="agent-card__mark">
        <div className="agent-card__icon">
          {video ? (
            <video
              ref={videoRef}
              className="agent-card__video"
              autoPlay
              muted
              loop
              playsInline
              preload="auto"
              aria-hidden="true"
            >
              <source src={`${video}.webm`} type='video/webm; codecs="vp9"' />
              <source src={`${video}.mov`} type='video/quicktime' />
            </video>
          ) : (
            <img src={logo} alt={title} className="agent-card__still" />
          )}
        </div>
        <img src={wordmark || logo} alt={title} className="agent-card__wordmark" />
      </div>
      <p className="agent-card__sub">{sub}</p>
      <ul className="agent-card__list">
        {items.map((it, i) => <li key={i}>{it}</li>)}
      </ul>
    </article>
  );
}

function Agents() {
  return (
    <section className="agents" id="agents">
      <DustField path={agentsPath} count={5000} color={[35, 35, 35]} className="agents__dust-canvas" />
      <div className="agents__head">
        <p className="eyebrow">TWO AGENTS · ONE PLATFORM</p>
        <h2 className="section-title">Built for Maritime.</h2>
      </div>
      <div className="agents__grid">
        <AgentCard
          variant="technical"
          logo="assets/logo-technical.png"
          wordmark="assets/wordmark-technical.png"
          video="assets/technical"
          title="Technical Chief"
          sub={"Your AI agent for instant troubleshooting\nand fleet-wide intelligence."}
          items={[
            "Minimize vessel downtime",
            "Gain fleet-wide visibility",
            "Preserve fleet intelligence",
            "Reduce operating costs"
          ]}
        />
        <AgentCard
          variant="compliance"
          logo="assets/logo-compliance.png"
          wordmark="assets/wordmark-compliance.png"
          video="assets/compliance"
          title="Compliance Chief"
          sub={"Your AI agent for flawless HSQE,\nSMS reporting and regulatory compliance."}
          items={[
            "Minimize detention risk",
            "Reduce off-hire periods",
            "Prevent terminal rejections",
            "Streamlined SMS compliance"
          ]}
        />
      </div>
    </section>
  );
}

function Roles() {
  const roles = [
    {
      num: "01 / Technical teams",
      title: <>Move <em>faster.</em> Miss <em>less.</em></>,
      body: "Instant troubleshooting, fleet-wide intelligence and cost-aware fixes — in one place."
    },
    {
      num: "02 / HSQE teams",
      title: <>Go in <em>confident.</em></>,
      body: "Gaps flagged before auditors do. Fewer findings. Lower detention risk."
    },
    {
      num: "03 / Owners & execs",
      title: <>Your team, <em>multiplied.</em></>,
      body: "Your existing org, extended with specialist AI agents — trading without disruption."
    }
  ];
  return (
    <section className="roles" id="roles">
      <div className="roles__head">
        <p className="eyebrow">EVERY ROLE IN YOUR FLEET</p>
        <h2 className="section-title">Built for the people on watch.</h2>
      </div>
      <div className="roles__grid">
        {roles.map((r, i) =>
          <div className="role" key={i}>
            <span className="role__num">{r.num}</span>
            <h3 className="role__title">{r.title}</h3>
            <p className="role__body">{r.body}</p>
          </div>
        )}
      </div>
    </section>
  );
}

function WhyCell({ label, body }) {
  return (
    <div className="why-cell">
      <h4 className="why-cell__label">{label}</h4>
      <p className="why-cell__body">{body}</p>
    </div>
  );
}

function Why() {
  useEffect(() => {
    let cleanup = null;
    if (window.initWhyParticles) {
      cleanup = window.initWhyParticles(document.getElementById('why-particles'));
    } else {
      const onReady = () => {
        cleanup = window.initWhyParticles(document.getElementById('why-particles'));
      };
      window.addEventListener('whyParticlesReady', onReady, { once: true });
      return () => window.removeEventListener('whyParticlesReady', onReady);
    }
    return () => cleanup && cleanup();
  }, []);
  return (
    <section className="why" id="why">
      <canvas id="why-particles" className="why__bg"></canvas>
      <div className="why__content">
        <h2 className="section-title why__title">Why AskChief?</h2>
        <div className="why__grid">
          <WhyCell label="Built by shipping, for shipping"
            body="Created by Superintendents and DPAs to solve real maritime challenges." />
          <WhyCell label="AI with proven results"
            body="60% faster issue resolution. Fewer audit findings. A fleet that trades without disruption." />
          <WhyCell label="Your data. Your advantage."
            body="Your SMS, manuals and defect history stay exclusive to your fleet. Never shared. Never reused." />
          <WhyCell label="One platform, many agents"
            body="Technical, compliance, and beyond — scaling and learning with your fleet." />
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  return (
    <section className="testimonials" id="testimonials">
      <div className="testimonials__head">
        <p className="eyebrow">WHAT MARITIME PROFESSIONALS SAY</p>
        <h2 className="section-title">Proof, not promises.</h2>
      </div>
      <div className="stat-row">
        <div className="stat">
          <div className="stat__num">60%</div>
          <p className="stat__lbl">Faster issue resolution</p>
        </div>
        <div className="stat">
          <div className="stat__num">↓</div>
          <p className="stat__lbl">Inspection-ready</p>
        </div>
        <div className="stat">
          <div className="stat__num">24/7</div>
          <p className="stat__lbl">Always on your side</p>
        </div>
      </div>
      <div className="quote-grid">
        <article className="quote">
          <img className="quote__photo" src="assets/testimonials/maria.jpg" alt="Maria" />
          <div className="quote__content">
            <p className="quote__body">“With AskChief, we go into every inspection confident. The system flags gaps before auditors do, which has directly reduced findings and minimized our detention risk.”</p>
            <span className="quote__attr">Maria · HSQE Manager</span>
          </div>
        </article>
        <article className="quote">
          <img className="quote__photo" src="assets/testimonials/andreas.png" alt="Andreas" />
          <div className="quote__content">
            <p className="quote__body">“AskChief helps us solve technical problems in minutes instead of hours. Faster fixes mean less downtime and fewer disruptions for both crew and superintendents.”</p>
            <span className="quote__attr">Andreas · Superintendent Engineer</span>
          </div>
        </article>
        <article className="quote">
          <img className="quote__photo" src="assets/testimonials/rajiv.png" alt="Rajiv" />
          <div className="quote__content">
            <p className="quote__body">“When a breakdown happens, AskChief guides me through the right checks straight away. It’s like having a superintendent in my pocket, even mid-voyage.”</p>
            <span className="quote__attr">Rajiv · Chief Engineer</span>
          </div>
        </article>
        <article className="quote">
          <img className="quote__photo" src="assets/testimonials/john.png" alt="John" />
          <div className="quote__content">
            <p className="quote__body">“AskChief gives me confidence that our technical and compliance teams are ahead of the curve. It protects uptime, lowers risk, and helps us trade without disruption.”</p>
            <span className="quote__attr">John · CEO</span>
          </div>
        </article>
      </div>
    </section>
  );
}

function Operators() {
  const ops = [
    { name: "Castor", logo: "assets/operators/castor.png" },
    { name: "Delia", logo: "assets/operators/delia.png" },
    { name: "Dianik Bross", logo: "assets/operators/dianik-bross.png" },
    { name: "IMECS", logo: "assets/operators/itochu.png" },
    { name: "Pleiades", logo: "assets/operators/pleiades.png" },
    { name: "Seanergy", logo: "assets/operators/seanergy.png" },
    { name: "United Maritime", logo: "assets/operators/united-maritime.svg" },
    { name: "Virono", logo: "assets/operators/virono.png" }
  ];
  return (
    <section className="operators" id="operators">
      <div className="operators__head">
        <p className="eyebrow">TRUSTED BY MARITIME LEADERS</p>
        <h2 className="section-title">Operators powered by AskChief.</h2>
      </div>
      <div className="operators__strip">
        {ops.map((o, i) => (
          <div className="op" key={i} aria-label={o.name} title={o.name}>
            <div className="op__logo-slot">
              <img className="op__logo op__logo--mono" src={o.logo} alt={o.name} />
              <img className="op__logo op__logo--color" src={o.logo} alt="" aria-hidden="true" />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: "What is AskChief?",
      a: "AskChief is a family of specialized AI agents built for maritime Technical and HSQE teams. It provides instant troubleshooting guidance, SMS compliance support, and access to fleet-wide operational knowledge — helping ship operators reduce downtime, improve inspection readiness, and scale expertise across their fleet." },
    { q: "Who is AskChief built for?",
      a: "AskChief is built for ship operators who want stronger technical performance, better compliance control, and less dependency on scattered knowledge. It supports both shore teams and vessel teams — including superintendents, HSQE managers, chief engineers, officers, and executives." },
    { q: "What does Technical Chief do?",
      a: "Technical Chief is your AI Agent for Technical Operations — delivering instant troubleshooting, one-click defect reporting, and fleet-wide intelligence to cut downtime, reduce manual guesswork, and save money across every vessel." },
    { q: "What does Compliance Chief do?",
      a: "Compliance Chief is your AI Agent for HSQE and regulatory compliance — streamlining form completion, automated audit reporting, and real-time regulatory tracking to eliminate errors, ensure full SMS adherence, and keep every vessel inspection-ready." },
    { q: "Why is AskChief different from a generic AI tool?",
      a: "AskChief is not a generic chatbot. It is a set of role-specific AI agents built for maritime operations — like an AI Superintendent for Technical teams and an AI DPA for HSQE teams. It combines your company's own fleet data with real maritime workflows, helping teams troubleshoot, report, prepare, and act faster — so your best operational knowledge becomes available across every vessel, every day." },
    { q: "Is our data secure?",
      a: "Yes. Your manuals, SMS, defect history, inspection records, and operational data remain private to your company. They are never shared with other customers and never reused to train anyone else's model." }
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="faq" id="faq">
      <div className="faq__head">
        <h2 className="section-title">FAQ.</h2>
        <p>The quick version. The longer version comes in the demo.</p>
      </div>
      <div className="faq__list">
        {items.map((it, i) =>
          <div key={i} className={`faq-item ${open === i ? "is-open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="faq-item__row">
              <span className="faq-item__num">{String(i + 1).padStart(2, "0")}</span>
              <h3 className="faq-item__q">{it.q}</h3>
              <span className="faq-item__plus" />
            </div>
            <div className="faq-item__a">
              <div>{it.a}</div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function CTA() {
  const [status, setStatus] = useState('idle');
  const [errorMsg, setErrorMsg] = useState('');

  async function handleSubmit(e) {
    e.preventDefault();
    if (status === 'submitting') return;
    const form = e.currentTarget;
    const fd = new FormData(form);
    const payload = {
      firstName: fd.get('firstName')?.toString().trim() || '',
      lastName: fd.get('lastName')?.toString().trim() || '',
      email: fd.get('email')?.toString().trim() || '',
      phone: fd.get('phone')?.toString().trim() || '',
      position: fd.get('position')?.toString().trim() || '',
      company: fd.get('company')?.toString().trim() || '',
      fleetSize: fd.get('fleetSize')?.toString() || '',
      source: fd.get('source')?.toString() || '',
      timeline: fd.get('timeline')?.toString() || '',
      message: fd.get('message')?.toString().trim() || '',
      website: fd.get('website')?.toString() || '',
    };
    if (!payload.firstName || !payload.email) {
      setStatus('error');
      setErrorMsg('Please fill in your first name and email.');
      return;
    }
    setStatus('submitting');
    setErrorMsg('');
    try {
      const r = await fetch('/api/demo', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!r.ok) throw new Error(`HTTP ${r.status}`);
      setStatus('success');
      form.reset();
    } catch (err) {
      setStatus('error');
      setErrorMsg('Something went wrong. Please try again or email us.');
    }
  }

  return (
    <section className="cta" id="demo">
      <DustField path={ctaPath} count={4000} color={[242, 241, 231]} />
      <div className="cta__inner">
        <div className="cta-card">
          <div className="cta-card__photo" />
          <div className="cta-card__overlay">
            <p className="cta-card__eyebrow">READY TO MEET YOUR<br />FIRST AI AGENT?</p>
            <h2 className="cta-card__title">Always Available.</h2>
          </div>
        </div>
        {status === 'success' ? (
          <div className="cta__form cta__form--success">
            <h3>Thanks — we'll be in touch.</h3>
            <p>Your demo request is in. Someone from AskChief will reach out shortly.</p>
          </div>
        ) : (
          <form className="cta__form" onSubmit={handleSubmit} noValidate>
            <h3>Give your fleet an unfair advantage.</h3>
            <div className="cta__form-grid">
              {/* Honeypot: invisible to humans, bots fill it. Server silently drops submissions where this has a value. */}
              <input
                type="text"
                name="website"
                tabIndex={-1}
                autoComplete="off"
                aria-hidden="true"
                className="cta__form-honeypot"
                defaultValue=""
              />
              <input name="firstName" placeholder="First name" required />
              <input name="lastName" placeholder="Last name" />
              <input className="full" name="email" type="email" placeholder="Email" required />
              <input name="phone" placeholder="Phone (optional)" />
              <input name="position" placeholder="Position" />
              <input name="company" placeholder="Company" />
              <select name="fleetSize" defaultValue="">
                <option value="" disabled>Fleet size</option>
                <option>1–5 vessels</option>
                <option>6–20 vessels</option>
                <option>21–50 vessels</option>
                <option>50+ vessels</option>
              </select>
              <select className="full" name="source" defaultValue="">
                <option value="" disabled>How did you find AskChief?</option>
                <option>Conference</option>
                <option>Colleague</option>
                <option>Search</option>
                <option>LinkedIn</option>
                <option>Other</option>
              </select>
              <select className="full" name="timeline" defaultValue="">
                <option value="" disabled>When are you looking to start?</option>
                <option>As soon as possible</option>
                <option>Within 1 month</option>
                <option>Within 2–3 months</option>
                <option>Within 6 months</option>
                <option>Just exploring / not sure yet</option>
              </select>
              <textarea className="full" name="message" rows="1" placeholder="Anything else? (optional)" />
            </div>
            {status === 'error' && <p className="cta__form-error">{errorMsg}</p>}
            <div className="submit-row">
              <button type="submit" className="btn-pill btn-pill--ink" disabled={status === 'submitting'}>
                {status === 'submitting' ? 'SENDING…' : 'REQUEST DEMO ACCESS'}
              </button>
            </div>
          </form>
        )}
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer__cap" />
      <div className="footer__inner">
        <div className="footer__col footer__brand">
          <img src="assets/wordmark-2.svg" alt="AskChief" />
        </div>
        <div className="footer__col">
          <p className="footer__tagline">
            Give your team an unfair advantage at sea and ashore.
          </p>
        </div>
        <div className="footer__col footer__contact">
          <div className="footer__contact-inner">
            <a href="mailto:info@askchief.ai">
              <span className="footer__contact-iconSlot" aria-hidden="true">
                <img src="assets/icon-mail.svg" alt="" />
              </span>
              <span>info@askchief.ai</span>
            </a>
            <a href="https://linkedin.com" target="_blank" rel="noopener">
              <span className="footer__contact-iconSlot" aria-hidden="true">
                <span className="footer__icon-linkedin">in</span>
              </span>
              <span>LinkedIn</span>
            </a>
          </div>
        </div>
      </div>
      <div className="footer__bottom">
        <span className="footer__copy">© 2026 AskChief. All rights reserved.</span>
        <div className="footer__legal">
          <a href="/privacy/">Privacy Policy</a>
          <a href="/terms/">Terms of Service</a>
        </div>
      </div>
    </footer>
  );
}

function App() {
  return (
    <>
      <Nav />
      <div className="page">
      <Hero />
      <Operators />
      <Agents />
      <Roles />
      <Why />
      <Testimonials />
      <FAQ />
      <CTA />
      <Footer />
      </div>
    </>
  );
}

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