// sections2.jsx — Cost, Onboarding, Credibility, Story, FAQ, FinalCTA, Footer

const { useState: useState2 } = React;

// ─── Cost / 80% stat (Section 8) ────────────────────────────────────
function CostSection() {
  return (
    <section className="sec" id="cost">
      <div className="wrap">
        <div className="sec-header">
          <div className="index">§ 03 / VALUE</div>
          <div className="head-body">
            <div className="eyebrow">WHAT THE LOOP CHANGES</div>
          </div>
        </div>
        <div className="cost">
          <div className="copy">
            <h2 className="section-h">Infrastructure maintains. The loop <em>compounds</em>.</h2>
            <p>Every week your team spends rebuilding pipeline is a week your robots aren't learning. The loop is different — every cycle through it makes the next cycle faster, the model sharper, and the failure library deeper. The teams that close the loop first don't just move faster. They compound faster.</p>
            <a className="btn btn-primary" href="https://cal.com/nchamprenault-vfrog/website-inbound" target="_blank" rel="noopener noreferrer">Book a discovery call <span className="arrow">→</span></a>
          </div>
          <div className="stat">
            <div className="big">2<span className="small"> weeks</span></div>
            <p className="caption">Discovery call to a <span style={{ color: 'var(--ink)' }}>running loop</span> — on your robot, your model, your data.</p>
            <div className="source">SOURCE / first-party · design partner onboarding</div>
          </div>
        </div>
      </div>
    </section>);

}

// ─── Onboarding (Section 9) ─────────────────────────────────────────
function OnboardingSection() {
  const steps = [
  { ix: '01', dur: '30 min', name: 'Discovery call',
    body: "We map your current loop: what hardware, what model, what's already collected, what's still being built. You walk away with a written assessment of where vfrog fits and what we'd replace." },
  { ix: '02', dur: '5–10 days', name: 'Onboarding sprint',
    body: "Your data flows in. Your model is wired up. The loop runs end-to-end on one of your real robots." },
  { ix: '03', dur: 'Ongoing', name: 'Production handoff',
    body: "You own the loop. We're on Slack. Quarterly platform reviews to map roadmap to your team's next phase." }];

  return (
    <section className="sec" id="onboarding">
      <div className="wrap">
        <div className="sec-header">
          <div className="index">§ 04 / ONBOARDING</div>
          <div className="head-body">
            <div className="eyebrow">ONBOARDING</div>
            <h2 className="section-h">From discovery call to a <em>running loop</em> in two weeks.</h2>
          </div>
        </div>
        <div className="onboarding">
          {steps.map((s) =>
          <div className="onb-step" key={s.ix}>
              <div className="marker">
                <span className="ix">STEP / {s.ix}</span>
                <span className="dur">{s.dur}</span>
              </div>
              <h3>{s.name}</h3>
              <p>{s.body}</p>
            </div>
          )}
        </div>
        <div className="onb-footer">
          <p>Pricing is bespoke and matched to your team's scale and roadmap. We'll walk through it on the discovery call.</p>
          <a className="btn btn-primary" href="https://cal.com/nchamprenault-vfrog/website-inbound" target="_blank" rel="noopener noreferrer">Book a discovery call <span className="arrow">→</span></a>
        </div>
      </div>
    </section>);

}

// ─── Credibility (Section 10) ───────────────────────────────────────
function CredibilitySection() {
  const tiles = [
  { key: 'ROS-native', val: 'ROS · ROS 2 · MCAP · rosbag.\nDrop us into your existing pipeline.' },
  { key: 'API + SDK first', val: 'Everything in the UI is in the API.\nTrain from a notebook. Trigger retrains from CI.' },
  { key: 'Open formats', val: 'YOLO · COCO · ONNX · TorchScript out.\nNo lock-in on data or models.' },
  { key: 'Your data, your cloud', val: 'BYO storage. Your robot data doesn\'t\nmove where you don\'t want it to.' }];

  return (
    <section className="sec" id="builder">
      <div className="wrap">
        <div className="sec-header">
          <div className="index">§ 10 / BUILDER</div>
          <div className="head-body">
            <div className="eyebrow">FOR THE PEOPLE WHO READ THE DOCS FIRST</div>
            <h2 className="section-h">Built like a robotics tool. Not enterprise marketing.</h2>
          </div>
        </div>
        <div className="credibility">
          {tiles.map((t) =>
          <div className="cred-tile" key={t.key}>
              <div className="key">{t.key}</div>
              <div className="val" style={{ whiteSpace: 'pre-line' }}>{t.val}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─── Story placeholder (Section 11) ─────────────────────────────────
function StorySection() {
  return (
    <section className="sec" id="story">
      <div className="wrap">
        <div className="sec-header">
          <div className="index">§ 11 / PILOT</div>
          <div className="head-body">
            <div className="eyebrow">CUSTOMER STORIES</div>
            <h2 className="section-h">Pilot case studies, <em>shipping Q3 2026.</em></h2>
            <p className="lead">Until we have named customer logos ready to publish, the homepage stays intentionally lean here. Read our point of view on physical AI infrastructure on the <a style={{ color: 'var(--accent)', borderBottom: '1px solid currentColor' }}>blog</a> instead.</p>
          </div>
        </div>
        <div className="story">
          <div className="ph-label">▸ PLACEHOLDER · NOT A REAL QUOTE</div>
          <p className="quote">We'd been mid-build on our own robot-learning infrastructure for four months. vfrog had us collecting data on Monday, training on Wednesday, and deploying to the robot on Friday. The infra project got cancelled the next day.</p>
          <div className="attr">
            <b>[name pending]</b>
            VP Engineering<br />
            [company pending]
            <div className="meta">
              5 days · disc. → deploy<br />
              96% · long-tail acc.<br />
              38 ms · Orin Nano
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─── FAQ (Section 12) ───────────────────────────────────────────────
const FAQ_ITEMS = [
{ q: 'What does vfrog do?', a: "vfrog runs the full physical AI loop for robotics teams: collect data from your robots, stream telemetry from deployed runs, train the model you've already chosen, evaluate it against your own benchmarks, deploy to the robot, and retrain when performance drifts. Model-agnostic — Pi, OpenVLA, Diffusion Policy, your own internal architecture. One platform, not five stitched-together tools." },
{ q: 'Who is it for?', a: "Robotics labs and applied robotics companies under 100 employees, where engineers are spending more time on data infrastructure than on robot skills. Typical buyer is the founder, VP Engineering, or Head of Robot Learning. If your team has built or is building an internal pipeline for the collect-train-deploy cycle and it's consuming senior engineering time, you're who we built this for." },
{ q: 'How is vfrog different from building it ourselves or using alternatives?', a: "Building it yourself costs six to twelve engineering-months for v1, plus an ongoing platform engineer to maintain it. The people doing that work are the same people who should be shipping skills.\n\nCompared to other full-loop platforms: we add synthetic data generation inside the training step — the capability that breaks the teleop-data ceiling — and we onboard through a customer-matched discovery call, not self-serve. Compared to VLA-only GPU clouds: they don't collect data, don't run evaluation, don't close the loop. Compared to 2010s-era CV labeling tools: different category, different era — those are built for image classifiers, not for robotics teams shipping policy and perception together." },
{ q: 'How does onboarding work?', a: "A 30-minute discovery call where we map your current loop. Then a 5–10 day onboarding sprint: your data flows in, your model is wired up, the loop runs end-to-end on one of your real robots. Most teams have a working environment within two weeks of the first call." },
{ q: 'How much does it cost?', a: "Pricing is bespoke — it depends on scale, embodiments, and which stages of the loop you need from day one. We start with a paid pilot scoped to determine your KPIs of success, then move to an annual contract with a 60-day money-back guarantee. No free trial, no self-serve tier. We walk through the structure on the discovery call." },
{ q: 'What about data security?', a: "SOC 2 in progress, GDPR support today. Bring-your-own cloud and on-prem deployment options. Your robot data doesn't leave your environment unless you explicitly send it. ROS, ROS 2, and MCAP supported natively." }];


function FAQSection() {
  const [open, setOpen] = useState2(0);
  return (
    <section className="sec" id="faq">
      <div className="wrap">
        <div className="sec-header">
          <div className="index">§ 05 / FAQ</div>
          <div className="head-body">
            <div className="eyebrow">FREQUENTLY ASKED</div>
            <h2 className="section-h">Answers the discovery call would otherwise start with.</h2>
          </div>
        </div>
        <div className="faq">
          {FAQ_ITEMS.map((item, i) =>
          <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span className="ix">Q/{String(i + 1).padStart(2, '0')}</span>
                <span>{item.q}</span>
                <span className="toggle">+</span>
              </button>
              <div className="faq-a">
                <p className="body" style={{ whiteSpace: 'pre-line' }}>{item.a}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─── Final CTA (Section 13) ─────────────────────────────────────────
function FinalCTA() {
  return (
    <section className="final-cta" id="cta">
      <div className="wrap">
        <div className="final-cta-inner">
          <div>
            <div className="eyebrow accent"><span className="dot"></span>STOP BUILDING INFRASTRUCTURE · START SHIPPING SKILLS</div>
            <h2>Book a 30-minute<br />discovery call.</h2>
            <p className="body">We'll map your current loop, show you what vfrog would replace, and send a written assessment within two business days. No pitch deck — just the math.</p>
            <div className="cta-row">
              <a className="btn btn-primary" href="https://cal.com/nchamprenault-vfrog/website-inbound" target="_blank" rel="noopener noreferrer">Book a discovery call <span className="arrow">→</span></a>
              <a className="btn btn-ghost" href="https://cal.com/nchamprenault-vfrog/website-inbound" target="_blank" rel="noopener noreferrer">Get the technical brief <span className="arrow">↗</span></a>
            </div>
            <div className="qualifier">
              <span>FOR ROBOTICS LABS</span>
              <span className="sep">·</span>
              <span>UNDER 100 EMPLOYEES</span>
            </div>
          </div>

          <div className="calendar-card">
            <div className="head">
              <span>▸ DISCOVERY CALL / 30 MIN</span>
              <span className="dot"></span>
            </div>
            <div className="row"><span>Format</span><span>Zoom · video</span></div>
            <div className="row"><span>Attendees</span><span>You + 1 robot-learning eng.</span></div>
            <div className="row"><span>Deliverable</span><span>Written assessment, 48h</span></div>
            <div className="row"><span>Next slot</span><span>This week</span></div>
            <div className="row"><span>Cost</span><span>$0</span></div>
          </div>
        </div>
      </div>
    </section>);

}

// ─── Footer ─────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src={window.__resources?.logo || "assets/logo.png"} alt="vfrog" />
            <div className="tagline">Physical AI infrastructure for robotics labs. The full loop on any robot, any model.</div>
          </div>
          <div className="footer-col">
            <h4>Product</h4>
            <ul>
              <li><a href="#loop">The Loop</a></li>
              <li><a href="#">How it works</a></li>
              <li><a href="#">Embodiments</a></li>
              <li><a href="#">Synthetic data</a></li>
              <li><a href="#">Free annotation tool</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Connect</h4>
            <div className="footer-socials">
              <a href="https://x.com/vfrogai" aria-label="X" title="X" target="_blank" rel="noopener noreferrer">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z" /></svg>
              </a>
              <a href="https://www.linkedin.com/company/vfrog" aria-label="LinkedIn" title="LinkedIn" target="_blank" rel="noopener noreferrer">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29ZM5.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.55V9h3.57v11.45ZM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0Z" /></svg>
              </a>
              <a href="https://github.com/orgs/vfrog-ai/repositories" aria-label="GitHub" title="GitHub" target="_blank" rel="noopener noreferrer">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 .5C5.37.5 0 5.78 0 12.29c0 5.21 3.44 9.63 8.2 11.19.6.11.82-.25.82-.57v-2c-3.34.71-4.04-1.58-4.04-1.58-.55-1.36-1.34-1.73-1.34-1.73-1.09-.73.08-.72.08-.72 1.2.08 1.84 1.21 1.84 1.21 1.07 1.8 2.81 1.28 3.5.98.11-.76.42-1.28.76-1.58-2.67-.3-5.47-1.31-5.47-5.81 0-1.28.47-2.33 1.24-3.15-.13-.3-.54-1.5.11-3.13 0 0 1.01-.32 3.3 1.2a11.6 11.6 0 0 1 6.01 0c2.29-1.52 3.3-1.2 3.3-1.2.65 1.63.24 2.83.12 3.13.77.82 1.23 1.87 1.23 3.15 0 4.51-2.81 5.5-5.49 5.79.43.37.82 1.1.82 2.22v3.29c0 .32.21.69.83.57A12.04 12.04 0 0 0 24 12.29C24 5.78 18.63.5 12 .5Z" /></svg>
              </a>
            </div>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <ul>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Careers</a></li>
              <li><a href="https://cal.com/nchamprenault-vfrog/website-inbound" target="_blank" rel="noopener noreferrer">Book a call</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-base">
          <div>© 2026 VFROG, INC. · ALL RIGHTS RESERVED</div>
          <div className="status"><span className="dot"></span>SYSTEMS NOMINAL · SOC2 IN PROGRESS · GDPR</div>
          <div>v2026.05 · BUILD 0a4f9c2</div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  CostSection, OnboardingSection, CredibilitySection, StorySection,
  FAQSection, FinalCTA, Footer
});