/* EOMA landing v3 · One real story · 4-step horizontal timeline (§8) */

function StoryTimeline() {
  const steps = [
    {
      label: "Week 1",
      lines: ["0 mentions", "No llms.txt", "Weak schema"],
      success: false,
    },
    {
      label: "Week 2",
      lines: ["llms.txt + 3 schema fixes shipped", "Press pitch drafted"],
      success: false,
    },
    {
      label: "Week 4",
      lines: ["9 FAQ pages published", "First 4 AI mentions"],
      success: false,
    },
    {
      label: "Week 6",
      lines: ["12 mentions across 4 providers", "Ranked #3 of 13", "AI Responses 471 / 861"],
      success: true,
    },
  ];

  return (
    <section className="story-section" id="story">
      <div className="story-head">
        <span className="eyebrow">
          <span className="dot dot-yellow" />
          <span>Real customer · 6 weeks</span>
        </span>
        <h2 className="t-display-lg">A Turkish ticketing platform went from invisible to #3 in 6 weeks.</h2>
      </div>

      <p className="story-narrative">
        <strong>Atlas Tickets</strong> started at 0 mentions in Perplexity for their 50 highest-volume
        buyer questions. They had 22 site pages, no llms.txt, weak schema and zero industry-press
        citations. In 6 weeks, EOMA shipped <strong>18 actions</strong> (3 llms.txt files,
        9 FAQ pages, 4 schema fixes, 2 PR pitches) — without their team writing a single line.
        Today they're cited in 12 of those 50 questions, ranked <strong>#3 of 13</strong> in their
        category, and their AI Responses count is <strong className="tabular">471 of 861</strong>.
      </p>

      <div className="timeline">
        <div className="timeline-line" aria-hidden="true" />
        <div className="timeline-steps">
          {steps.map((s, i) => (
            <div key={i} className={`timeline-step ${s.success ? "success" : ""}`}>
              <span className="timeline-dot" />
              <span className="timeline-label">{s.label}</span>
              <div className="timeline-status">
                {s.lines.map((l, j) => <span key={j}>{l}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>

      <p className="timeline-foot">
        Atlas Tickets used as demo fixture — every action listed actually shipped.
      </p>

      <div className="timeline-cta">
        <a href="/signup" className="btn btn-primary">
          <window.LogoBadge size={22} />
          <span>Start your trial</span>
        </a>
      </div>
    </section>
  );
}

Object.assign(window, { StoryTimeline });