// sections-b.jsx — Features, Included, Footer
const Reveal_b = window.Reveal;

function Features() {
  const feats = [
  ["F-01", "Your existing Excel format", "No migration, no new database — the file you already have works as-is."],
  ["F-02", "Editable draw.io output", "Your diagram comes back as a draw.io file you can open and edit — not a locked PDF."],
  ["F-03", "ITAR-compatible by design", "Controlled data never leaves your environment. Full stop."],
  ["F-04", "DRC before every drawing", "AS50881-based checks run automatically — duplicate pins, open ends, invalid AWG — plus your company rules."],
  ["F-05", "Handles complex connections", "Splices, twisted and shielded pairs, overbraid shields — represented correctly and clearly labeled."],
  ["F-06", "Batch your whole backlog", "Point it at a folder of wire lists and get a complete documentation package for each one."]];

  return (
    <section className="feat" id="features">
      <div className="wrap">
        <Reveal_b as="h2" className="section-title feat-title" delay={60}>Built for how aerospace teams actually work.</Reveal_b>
        <div className="feat-grid">
          {feats.map(([n, t, d], i) =>
          <Reveal_b className="feat-card" key={n} delay={i % 3 * 80}>
              <div className="feat-n mono">{n}</div>
              <h3 className="feat-label">{t}</h3>
              <p className="feat-desc">{d}</p>
            </Reveal_b>
          )}
        </div>
      </div>
      <style>{`
        .feat { background: var(--paper-2); color: var(--ink); padding: var(--sp-section) 0; }
        .feat-title { margin: 18px 0 60px; color: var(--ink); max-width: 22ch; }
        .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
        .feat-card { background: var(--paper-card); padding: 34px 30px 38px; transition: background .2s ease; }
        .feat-card:hover { background: var(--surface-hover); }
        .feat-n { font-size: 12px; letter-spacing: .14em; color: var(--accent); margin-bottom: 20px; }
        .feat-label { font-size: 19px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 11px; }
        .feat-desc { font-size: 15px; line-height: 1.6; color: var(--ink-mut); margin: 0; text-wrap: pretty; }
        @media (max-width: 860px) { .feat-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>);

}

function Included() {
  const rows = [
  ["01", "Custom wire list parser", "Configured to your exact column names, tabs, and formatting. No reformatting on your end — your file works as-is.", "INCLUDED"],
  ["02", "Automatic harness diagram", "Wire list in, diagram out in under 60 seconds. Connectors labeled, wires color-coded, splices and shielded pairs drawn correctly. Editable .drawio file — PDF in one click.", "INCLUDED"],
  ["03", "Design rule check report", "AS50881-based checks plus your company-specific rules, run before every drawing. Dated, harness-referenced findings report formatted for AS9100 traceability.", "INCLUDED"],
  ["04", "Connector pinout tables", "One table per connector — pin, signal name, wire ID, AWG, color, destination. What technicians use instead of tracing lines across a drawing.", "INCLUDED"],
  ["05", "Procurement BOM", "Wire types, connector part numbers, and quantities in a standalone Excel file your purchasing team can use directly.", "INCLUDED"],
  ["06", "Company drawing template", "Your title block, CAGE code, drawing size, revision block, and logo — every page looks like your standard drawing package.", "INCLUDED"],
  ["07", "Batch mode", "Process your entire backlog in one session — a folder of wire lists in, a documentation package per harness out, DRC warnings summarized at the end.", "INCLUDED"],
  ["08", "Onboarding session", "One hour on Zoom: column mapping on your actual wire list, first run reviewed together, company DRC rules configured.", "INCLUDED"],
  ["09", "Training package", "Recorded walkthrough and written documentation — any engineer on your team can run it on day one.", "INCLUDED"],
  ["10", "Configuration you own", "Your mapping, template, rules, and connector library delivered as portable config files. The app runs on your machines indefinitely.", "INCLUDED"],
  ["11", "30-day support window", "Slack and email support after delivery — bugs fixed, edge cases handled. Monthly retainer available after for re-runs and new modules.", "30 DAYS"]];

  return (
    <section className="incl" id="included">
      <div className="wrap">
        <Reveal_b as="h2" className="section-title incl-title" delay={60}>What's included.</Reveal_b>
        <div className="incl-table">
          <div className="incl-thead mono"><span>ITEM</span><span>DESCRIPTION</span><span>STATUS</span></div>
          {rows.map(([n, t, d, s], i) =>
          <Reveal_b className="incl-row" key={n} delay={i * 60}>
              <div className="incl-item"><span className="incl-n mono">{n}</span><span className="incl-t">{t}</span></div>
              <div className="incl-d">{d}</div>
              <div className="incl-s"><span className={"incl-badge " + (s !== "INCLUDED" ? "alt" : "")}>{s}</span></div>
            </Reveal_b>
          )}
        </div>
      </div>
      <style>{`
        .incl { background: var(--paper); padding: var(--sp-section) 0; }
        .incl-title { margin: 18px 0 48px; }
        .incl-table { border-top: 2px solid var(--ink); }
        .incl-thead, .incl-row { display: grid; grid-template-columns: 1.3fr 2fr .8fr; align-items: center; gap: 24px; }
        .incl-thead { padding: 12px 4px; font-size: 11px; letter-spacing: .14em; color: var(--ink-faint); border-bottom: 1px solid var(--line); }
        .incl-thead span:last-child, .incl-s { text-align: right; }
        .incl-row { padding: 20px 4px; border-bottom: 1px solid var(--line); transition: background .15s ease; }
        .incl-row:hover { background: var(--surface-hover); }
        .incl-item { display: flex; align-items: baseline; gap: 16px; }
        .incl-n { font-size: 13px; color: var(--accent); font-weight: 600; }
        .incl-t { font-size: 19px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
        .incl-d { font-size: 16px; color: var(--ink-mut); line-height: 1.5; }
        .incl-badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; font-weight: 600; color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 9%, transparent); padding: 4px 10px; white-space: nowrap; }
        .incl-badge.alt { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
        @media (max-width: 760px) {
          .incl-thead { display: none; }
          .incl-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 4px; }
          .incl-s { text-align: left; }
        }
      `}</style>
    </section>);

}

// Closing CTA section removed at user request — the Try It Out section is the final step.

function Footer() {
  return (
    <footer className="ft">
      <div className="wrap ft-inner">
        <div className="ft-left">
          {window.Wordmark ? <window.Wordmark /> : null}
          <span className="ft-built">
            <span className="ft-built-label">Built by</span>
            <a className="ft-brand" href="index.html">
              <img className="ft-logo" src="assets/neronis-logo.png" alt="Neronis AI" />
              <span className="ft-tagline mono">AI for Aerospace</span>
            </a>
          </span>
        </div>
        <div className="ft-right">
          <a href="#try" className="ft-link">Try it out →</a>
          <span className="ft-copy mono">© 2026 Tractus</span>
        </div>
      </div>
      <style>{`
        .ft { background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); padding: 40px 0; }
        .ft-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
        .ft-left { display: flex; align-items: center; gap: 22px; }
        .ft-built { display: inline-flex; align-items: center; gap: 12px; padding-left: 22px; border-left: 1px solid var(--line); }
        .ft-built-label { font-size: 14px; color: var(--ink-faint); white-space: nowrap; }
        .ft-brand { display: flex; flex-direction: column; gap: 5px; }
        .ft-tagline { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
        .ft-logo { height: 19px; width: auto; display: block; }
        html[data-theme="dark"] .ft-logo { filter: invert(1) hue-rotate(180deg) saturate(1.4); }
        .ft-right { display: flex; align-items: center; gap: 24px; }
        .ft-link { font-size: 14px; font-weight: 600; color: var(--ink-2); transition: color .15s ease; white-space: nowrap; }
        .ft-link:hover { color: var(--ink); }
        .ft-copy { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
      `}</style>
    </footer>);

}

Object.assign(window, { Features, Included, Footer });
