/* global React */
const { useState } = React;

const TOOLS = [
  {
    id: "free",
    name: "WeVideo + Audacity + Canva",
    tag: "Free · Browser-based · Best for classrooms",
    logo: "W",
    blurb: "A zero-install stack that runs entirely in the browser. Good default for large undergraduate sections where you can't rely on hardware.",
    specs: [
      ["Edit", "WeVideo (online, timeline + tracks)"],
      ["Audio", "Audacity (desktop) or WeVideo's audio mixer"],
      ["Stills", "Canva for title cards + lower-thirds"],
      ["Export", "1080p, H.264, MP4"],
      ["License", "Free tier (cap) + edu discount"],
    ],
    pros: ["No install required", "Handles any device", "Real timeline + layers", "Auto-captions included"],
    cons: ["Free tier watermarks export", "Cloud-only = needs wifi", "Rendering can queue"],
  },
  {
    id: "apple",
    name: "iMovie + GarageBand + Photos",
    tag: "Free · Apple-only · Best for individual students",
    logo: "A",
    blurb: "If every student has a Mac or iPad, this is the fastest path to a polished piece. The integration between the three apps is the point.",
    specs: [
      ["Edit", "iMovie (macOS / iPadOS / iOS)"],
      ["Audio", "GarageBand (narration + score)"],
      ["Stills", "Apple Photos + Keynote for title cards"],
      ["Export", "1080p, H.264, MP4 or MOV"],
      ["License", "Free, pre-installed"],
    ],
    pros: ["Drag-drop simple", "iCloud handoff between devices", "Royalty-free music library", "Very fast render"],
    cons: ["Apple ecosystem only", "No multi-track video", "Ceiling for advanced edits"],
  },
  {
    id: "davinci",
    name: "DaVinci Resolve + Fairlight",
    tag: "Free tier · Desktop · Best for advanced students",
    logo: "R",
    blurb: "A pro-grade editor with a generous free version. Steeper curve, but students who stick with it leave the class with a portfolio-quality tool.",
    specs: [
      ["Edit", "DaVinci Resolve (Cut + Edit pages)"],
      ["Audio", "Fairlight (built in)"],
      ["Color", "Built-in grading tools"],
      ["Export", "4K, ProRes / H.265 / MP4"],
      ["License", "Free · Studio $295 one-time"],
    ],
    pros: ["Industry-standard output", "Excellent audio tools", "No subscription", "Advanced color grading"],
    cons: ["Demanding hardware", "Steep learning curve", "Heavy install (~3 GB)"],
  },
  {
    id: "adobe",
    name: "Adobe Premiere Rush / Pro",
    tag: "Paid · Cross-platform · Best if already licensed",
    logo: "Pr",
    blurb: "If your institution has a Creative Cloud license, Rush is the easiest on-ramp; Pro is the long-term home. Cloud libraries make team projects painless.",
    specs: [
      ["Edit", "Rush (simple) or Premiere Pro (full)"],
      ["Audio", "Rush built-in or Audition"],
      ["Stills", "Photoshop + Illustrator for titles"],
      ["Export", "Up to 4K, H.264 / H.265"],
      ["License", "CC subscription (~$20/mo student)"],
    ],
    pros: ["Cross-device projects", "Deep ecosystem", "Excellent auto-captions", "Team library sharing"],
    cons: ["Subscription required", "Heavy install", "Can feel overkill for short pieces"],
  },
  {
    id: "mobile",
    name: "CapCut + Voice Memos + Snapseed",
    tag: "Free · Mobile-first · Best for field work",
    logo: "C",
    blurb: "Everything on a phone. The right choice when students are gathering interviews and b-roll outside the classroom and don't want to offload files.",
    specs: [
      ["Edit", "CapCut (iOS / Android)"],
      ["Audio", "Voice Memos or LumaFusion"],
      ["Stills", "Snapseed or Lightroom Mobile"],
      ["Export", "1080p, H.264, MP4"],
      ["License", "Free"],
    ],
    pros: ["Shoots + edits in one device", "Fast captions", "Huge effect library", "No install friction"],
    cons: ["Small screen for fine edits", "Fewer audio tracks", "Watermarks on some effects"],
  },
];

function Tools() {
  const [tab, setTab] = useState(TOOLS[0].id);
  const t = TOOLS.find((x) => x.id === tab);
  return (
    <section className="sec" id="tools">
      <div className="wrap">
        <window.SectionHead
          num="05"
          eyebrow="Tools &amp; software"
          title="Five stacks. Pick one per cohort."
          lede="Don't let students choose their own editor. Pick the stack that matches your classroom's hardware and your own capacity to support it. Here are five that work, with honest trade-offs."
        />

        <div className="tabs">
          <div className="tab-strip" role="tablist">
            {TOOLS.map((x) => (
              <button
                key={x.id}
                className={"tab-btn" + (x.id === tab ? " active" : "")}
                onClick={() => setTab(x.id)}
              >
                {x.name.split(" +")[0]}
              </button>
            ))}
          </div>
          <div className="tab-body">
            <div className="tool-head">
              <div className="tool-logo">{t.logo}</div>
              <div>
                <h3 className="tool-h">{t.name}</h3>
                <span className="tool-tag">{t.tag}</span>
              </div>
            </div>
            <p style={{color: "var(--ink-dim)", fontSize: 15, lineHeight: 1.6, maxWidth: "64ch", margin: "0 0 24px"}}>{t.blurb}</p>
            <div className="tool-grid">
              <div>
                <ul className="tool-list">
                  {t.specs.map(([k, v]) => (
                    <li key={k}><b>{k}</b><span>{v}</span></li>
                  ))}
                </ul>
              </div>
              <div className="tool-side">
                <h5>Trade-offs</h5>
                <div className="pros-cons">
                  <ul className="pros">
                    {t.pros.map((p) => <li key={p}>{p}</li>)}
                  </ul>
                  <ul className="cons">
                    {t.cons.map((p) => <li key={p}>{p}</li>)}
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Tools = Tools;