const Method = () => {
  const tabs = [
    {
      id: 'panels',
      label: 'Proprietary panels',
      title: 'Panels that actually build PCs.',
      body: 'We maintain verified panels of system integrators, IT procurement leads, channel partners, and enthusiast builders across North America, EMEA, and APAC. Every response is screened against purchase history.',
      bullets: ['6,200+ verified panelists', 'Quarterly re-verification', 'Single-industry depth, not generic'],
      visual: 'panels'
    },
    {
      id: 'tracking',
      label: 'Channel tracking',
      title: 'Price and availability, SKU by SKU.',
      body: 'Automated ingest of 420+ SKUs across 38 retail and distributor channels — reconciled with field agents on the ground in the three markets that set global pricing.',
      bullets: ['Daily collection, weekly publish', 'Grey-market detection', 'Index-linked to MSRP and street'],
      visual: 'tracking'
    },
    {
      id: 'teardown',
      label: 'Hardware teardown',
      title: 'We open the box. Literally.',
      body: 'Our lab performs structured teardowns on every major launch — photographing, weighing, and costing each component to reconstruct BOM and infer roadmap direction.',
      bullets: ['~140 teardowns per year', 'Component-level BOM', 'Thermal and acoustic profiling'],
      visual: 'teardown'
    },
    {
      id: 'synthesis',
      label: 'Synthesis',
      title: 'Research that ends in a decision.',
      body: 'Every engagement closes with a readout designed around the choice you have to make — not a 120-slide appendix. We write for the executive in the room.',
      bullets: ['Decision-first briefings', '72-hour turn on flash topics', 'Always a named analyst, never a bot'],
      visual: 'synthesis'
    }
  ];
  const [active, setActive] = React.useState(tabs[0].id);
  const current = tabs.find(t => t.id === active);

  const Visual = ({ kind }) => {
    if (kind === 'panels') return (
      <div className="viz viz-panels">
        {Array.from({length: 28}).map((_, i) => (
          <div key={i} className="dot" style={{animationDelay: `${(i*53)%900}ms`}}/>
        ))}
        <div className="viz-caption">6,200 panelists · 38 markets</div>
      </div>
    );
    if (kind === 'tracking') return (
      <div className="viz viz-tracking">
        <div className="rows">
          {['RTX-tier','RX-tier','DRAM DDR5','NVMe Gen4','ATX PSU','AIO 360'].map((r, i) => (
            <div key={r} className="row">
              <span className="rk">{r}</span>
              <div className="bar"><span className="fill" style={{width: `${40 + (i*9)%55}%`}}/></div>
              <span className="delta">{(i%2===0?'+':'−')}{(0.4 + (i*0.7)%3).toFixed(1)}%</span>
            </div>
          ))}
        </div>
        <div className="viz-caption">Live pricing index · last 7d</div>
      </div>
    );
    if (kind === 'teardown') return (
      <div className="viz viz-teardown">
        <div className="td-grid">
          {['PCB','VRM','GPU die','Memory','Thermal','Fan','Backplate','I/O'].map((c, i) => (
            <div key={c} className="cell"><span className="ck">{String(i+1).padStart(2,'0')}</span><span className="cv">{c}</span></div>
          ))}
        </div>
        <div className="viz-caption">Reference teardown · 8 of 34 modules</div>
      </div>
    );
    return (
      <div className="viz viz-synthesis">
        <div className="doc">
          <div className="doc-h">Executive readout</div>
          <div className="doc-line" style={{width:'85%'}}/>
          <div className="doc-line" style={{width:'70%'}}/>
          <div className="doc-line" style={{width:'90%'}}/>
          <div className="doc-chip">Decision: accelerate Q3 launch</div>
          <div className="doc-line" style={{width:'55%'}}/>
        </div>
        <div className="viz-caption">One page. One decision.</div>
      </div>
    );
  };

  return (
    <section className="method" id="method">
      <div className="container">
        <div className="section-head">
          <div className="kicker">Methodology</div>
          <h2 className="h-display">Four disciplines, <em>one</em> point of view.</h2>
          <p className="section-sub">A full-stack research operation built around the computer parts category. No off-the-shelf panels. No generalist analysts.</p>
        </div>

        <div className="method-tabs" role="tablist">
          {tabs.map(t => (
            <button
              key={t.id}
              role="tab"
              aria-selected={active === t.id}
              className={`method-tab ${active === t.id ? 'active' : ''}`}
              onClick={() => setActive(t.id)}
            >
              {t.label}
            </button>
          ))}
        </div>

        <div className="method-panel">
          <div className="mp-copy">
            <h3>{current.title}</h3>
            <p>{current.body}</p>
            <ul>
              {current.bullets.map(b => (
                <li key={b}>
                  <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 7 L6 11 L12 3" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  {b}
                </li>
              ))}
            </ul>
          </div>
          <div className="mp-visual">
            <Visual kind={current.visual} />
          </div>
        </div>
      </div>
    </section>
  );
};

window.Method = Method;