/* global SolutionsStory */
const motion = window.motion;

function SolutionsStory() {
  const STEPS = [
    { num: '01', label: 'Capture',  sub: 'Lead arrives via form, ad or chat',    status: 'New lead · cobra.co',           color: '#2F80ED' },
    { num: '02', label: 'Qualify',  sub: 'Auto-scored and enriched in seconds',  status: 'Score 84 · Tier A',             color: '#FFC72C' },
    { num: '03', label: 'Route',    sub: 'Assigned to the right person instantly',status: 'Routed to Sam · Slack DM sent', color: '#FF7A00' },
    { num: '04', label: 'Reply',    sub: 'Personalised pitch sent automatically', status: 'Auto-pitch delivered',          color: '#16A34A' },
  ];

  const [active, setActive] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % STEPS.length), 1600);
    return () => clearInterval(id);
  }, []);

  const progressPct = ((active + 1) / STEPS.length) * 100;

  return (
    <section id="solutions-story" className="solutions-story" data-screen-label="Solutions Story">
      <div className="solutions-story-grid">
        <div>
          <div className="meta">05 — The Solutions story</div>
          <h2>Solutions is new. So we built it <em>on ourselves first.</em></h2>
          <p>
            The lead intake, content pipeline, CRM and the very website you're on right now are all running on the same Solutions stack we sell. No mockups. No hypothetical case study. Just the engine, working.
          </p>
          <p style={{ marginTop: 16 }}>
            We're taking on <strong style={{ color:'#fff' }}>three founding clients</strong> at a reduced rate in exchange for full case-study rights. Two spots left.
          </p>
          <div className="cta-row">
            <a href="ofa-build.html" className="cta-blue">See the OFA build →</a>
            <a href="solutions.html#founding" className="cta-ghost">Founding client program</a>
          </div>
        </div>

        <div className="sys" data-comment-anchor="solutions-widget">
          {/* Header row */}
          <div className="sys-hd">
            <span className="sys-live-dot"></span>
            <span className="sys-hd-label">ofa-lead-intake · live</span>
            <span className="sys-hd-ver">v2.4</span>
          </div>

          {/* Step cards — no connecting lines */}
          <div className="sys-steps-grid">
            {STEPS.map((s, i) => (
              <div
                key={s.label}
                className={`sys-step-card ${i === active ? 'active' : ''} ${i < active ? 'done' : ''}`}
                style={{ '--step-color': s.color }}
              >
                <div className="sys-step-num">{s.num}</div>
                <div className="sys-step-name">{s.label}</div>
                <div className="sys-step-sub">{s.sub}</div>
                {/* Always rendered — visibility keeps card height stable, no layout shift */}
                <div className="sys-step-live" style={{ visibility: i === active ? 'visible' : 'hidden' }}>
                  {s.status}
                </div>
                <span className="sys-step-check" style={{ visibility: i < active ? 'visible' : 'hidden' }}>✓</span>
              </div>
            ))}
          </div>

          {/* Progress bar */}
          <div className="sys-prog-wrap">
            <div className="sys-prog-fill" style={{ width: progressPct + '%' }}></div>
          </div>

          {/* Current action — friendly readable */}
          <div className="sys-action">
            <span className="sys-action-dot"></span>
            <span className="sys-action-text">{STEPS[active].status}</span>
            <span className="sys-action-step">Step {active + 1} of {STEPS.length}</span>
          </div>

          {/* Stats */}
          <div className="sys-stats">
            <div><div className="n">11.2s</div><div className="l">avg first reply</div></div>
            <div><div className="n">100%</div><div className="l">leads contacted</div></div>
            <div><div className="n">24/7</div><div className="l">always on</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.SolutionsStory = SolutionsStory;