Alternating Media Rows

export default function FeatureAlternatingMedia() {
  const rows = [
    {
      eyebrow: "Plan",
      title: "See the whole quarter on one board",
      body: "Drag work between weeks, spot the crunch before it arrives and keep every stakeholder looking at the same picture. No screenshots, no stale exports.",
      points: ["Timeline and board views", "Capacity warnings", "Shareable read only links"],
      label: "Illustration of a planning board with three columns of task cards",
      visual: (
        <div className="grid grid-cols-3 gap-3">
          {[
            ["h-16", "h-24", "h-12"],
            ["h-24", "h-12", "h-20"],
            ["h-12", "h-20", "h-16"],
          ].map((col, i) => (
            <div key={i} className="space-y-3">
              {col.map((h, j) => (
                <div
                  key={j}
                  className={`${h} rounded-lg bg-white/70 shadow-sm ring-1 ring-indigo-900/5 dark:bg-white/10 dark:ring-white/10`}
                />
              ))}
            </div>
          ))}
        </div>
      ),
    },
    {
      eyebrow: "Measure",
      title: "Numbers that update while you watch",
      body: "Live metrics replace the weekly spreadsheet ritual. Set a target once and the chart tracks it for you, flagging the moment a trend turns.",
      points: ["Real time dashboards", "Custom goals", "Anomaly alerts"],
      label: "Illustration of a rising bar chart with a trend line",
      visual: (
        <div className="flex h-full items-end gap-3">
          {[40, 62, 48, 78, 90, 70].map((v, i) => (
            <div key={i} className="flex flex-1 flex-col justify-end">
              <div
                className="rounded-t-md bg-gradient-to-t from-emerald-500 to-emerald-300 dark:from-emerald-500 dark:to-emerald-400"
                style={{ height: `${v}%` }}
              />
            </div>
          ))}
        </div>
      ),
    },
    {
      eyebrow: "Ship",
      title: "Hand off with nothing lost in the gap",
      body: "Every decision, file and comment travels with the work when it moves to the next team, so context never falls through the cracks between tools.",
      points: ["Threaded discussion", "Attached specs", "Automatic handover notes"],
      label: "Illustration of stacked message threads and an attached file",
      visual: (
        <div className="space-y-3">
          <div className="flex items-start gap-3">
            <div className="h-8 w-8 shrink-0 rounded-full bg-amber-300 dark:bg-amber-400/80" />
            <div className="flex-1 space-y-2">
              <div className="h-3 w-2/3 rounded bg-white/70 dark:bg-white/15" />
              <div className="h-3 w-full rounded bg-white/50 dark:bg-white/10" />
            </div>
          </div>
          <div className="ml-11 rounded-lg bg-white/70 p-3 ring-1 ring-amber-900/5 dark:bg-white/10 dark:ring-white/10">
            <div className="flex items-center gap-2">
              <div className="h-6 w-6 rounded bg-amber-400/80" />
              <div className="h-3 w-1/2 rounded bg-white/60 dark:bg-white/15" />
            </div>
          </div>
          <div className="flex items-start gap-3">
            <div className="h-8 w-8 shrink-0 rounded-full bg-rose-300 dark:bg-rose-400/80" />
            <div className="flex-1 space-y-2">
              <div className="h-3 w-1/2 rounded bg-white/70 dark:bg-white/15" />
            </div>
          </div>
        </div>
      ),
    },
  ];

  const tints = [
    "from-indigo-100 to-indigo-50 dark:from-indigo-500/15 dark:to-indigo-500/5",
    "from-emerald-100 to-emerald-50 dark:from-emerald-500/15 dark:to-emerald-500/5",
    "from-amber-100 to-amber-50 dark:from-amber-500/15 dark:to-amber-500/5",
  ];

  return (
    <section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div className="mx-auto max-w-6xl">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-balance text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
            One flow from first idea to finished work
          </h2>
          <p className="mt-4 text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">
            Three stages, one continuous thread. Nothing gets copied, re-keyed or forgotten along the way.
          </p>
        </div>

        <div className="mt-16 space-y-16 md:space-y-24">
          {rows.map((row, i) => (
            <div
              key={row.title}
              className="grid items-center gap-8 md:grid-cols-2 md:gap-12"
            >
              <div className={i % 2 === 1 ? "md:order-2" : ""}>
                <p className="text-sm font-semibold uppercase tracking-widest text-indigo-600 dark:text-indigo-400">
                  {row.eyebrow}
                </p>
                <h3 className="mt-3 text-2xl font-bold tracking-tight text-zinc-900 sm:text-3xl dark:text-white">
                  {row.title}
                </h3>
                <p className="mt-4 text-base leading-relaxed text-zinc-600 dark:text-zinc-400">
                  {row.body}
                </p>
                <ul className="mt-6 space-y-3">
                  {row.points.map((point) => (
                    <li key={point} className="flex items-center gap-3">
                      <svg
                        aria-hidden="true"
                        viewBox="0 0 20 20"
                        fill="currentColor"
                        className="h-5 w-5 shrink-0 text-emerald-500 dark:text-emerald-400"
                      >
                        <path
                          fillRule="evenodd"
                          d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.3 3.29 6.8-6.79a1 1 0 0 1 1.4 0z"
                          clipRule="evenodd"
                        />
                      </svg>
                      <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
                        {point}
                      </span>
                    </li>
                  ))}
                </ul>
              </div>

              <figure
                role="img"
                aria-label={row.label}
                className={`flex min-h-56 items-center rounded-2xl border border-zinc-200 bg-gradient-to-br p-6 shadow-sm dark:border-zinc-800 ${tints[i]} ${
                  i % 2 === 1 ? "md:order-1" : ""
                }`}
              >
                <div className="w-full">{row.visual}</div>
              </figure>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}