---
const proofs = [
  { id: 'polish', command: '/polish', label: 'Remove the tells' },
  { id: 'distill', command: '/distill', label: 'Find the hierarchy' },
  { id: 'clarify', command: '/clarify', label: 'Make the task obvious' },
];
---

<section class="hero-proof" data-hero-proof aria-label="Impeccable command before and after examples">
  <div class="hero-proof-stage">
    {proofs.map((proof, index) => (
      <div
        class:list={['hero-proof-panel', { 'is-active': index === 0 }]}
        id={`hero-proof-panel-${proof.id}`}
        role="tabpanel"
        aria-labelledby={`hero-proof-tab-${proof.id}`}
        data-proof-panel={proof.id}
        hidden={index !== 0}
      >
        <div class="hero-proof-layer hero-proof-layer--before">
          <span class="hero-proof-side-label hero-proof-side-label--before">Before</span>

          <div class={`hero-proof-canvas hero-proof-canvas--${proof.id}`} aria-hidden="true">
            {proof.id === 'polish' && (
              <article class="proof-polish proof-polish--before">
                <header class="proof-polish-head">
                  <span class="proof-polish-sprint">Launch / 14</span>
                  <span class="proof-polish-pulse">
                    <i></i> On track
                  </span>
                </header>
                <div class="proof-polish-body">
                  <span class="proof-polish-kicker">
                    Release planning
                    <span class="proof-annotation">AI kicker</span>
                  </span>
                  <div class="proof-polish-heading">
                    <h3>Ship the <em>launch plan</em> by Friday.</h3>
                    <span class="proof-annotation">Italic serif</span>
                  </div>
                  <p>Owners, dependencies, and decisions in one view.</p>
                  <div class="proof-polish-progress"><i></i></div>
                  <footer><span>8 of 11 decisions closed</span><b>Review plan →</b></footer>
                  <span class="proof-annotation proof-annotation--surface">AI beige</span>
                </div>
              </article>
            )}

            {proof.id === 'distill' && (
              <article class="proof-distill proof-distill--before">
                <header>
                  <strong>Analytics overview</strong>
                  <span class="proof-distill-live">
                    Live
                    <span class="proof-annotation">Status-chip soup</span>
                  </span>
                </header>
                <div class="proof-distill-grid">
                  <div><small>Revenue</small><b>$84.2k</b><i>+12%</i></div>
                  <div><small>Orders</small><b>1,248</b><i>+8%</i></div>
                  <div><small>Visitors</small><b>18.4k</b><i>+21%</i></div>
                  <div><small>Conversion</small><b>3.8%</b><i>+4%</i></div>
                  <span class="proof-annotation">Everything equal</span>
                </div>
                <div class="proof-distill-nested">
                  <span>Weekly performance</span><div><i></i><i></i><i></i></div>
                  <span class="proof-annotation">Cards in cards</span>
                </div>
              </article>
            )}

            {proof.id === 'clarify' && (
              <article class="proof-clarify proof-clarify--before">
                <header><span>Get started</span><small>All fields required</small></header>
                <div class="proof-clarify-heading">
                  <h3>Unlock your potential today</h3>
                  <span class="proof-annotation">Vague headline</span>
                </div>
                <div class="proof-clarify-fields">
                  <i>Acme Labs</i><i>Product lead</i><i>Activation</i><i>This quarter</i>
                  <span class="proof-annotation">Too many fields</span>
                </div>
                <span class="proof-clarify-cta">
                  Continue
                  <span class="proof-annotation">Generic CTA</span>
                </span>
              </article>
            )}
          </div>
        </div>

        <div class="hero-proof-layer hero-proof-layer--after">
          <span class="hero-proof-side-label hero-proof-side-label--after">After</span>

          <div class={`hero-proof-canvas hero-proof-canvas--${proof.id}`} aria-hidden="true">
            {proof.id === 'polish' && (
              <article class="proof-polish proof-polish--after">
                <header class="proof-polish-head">
                  <span class="proof-polish-sprint">Launch / 14</span>
                  <span class="proof-polish-track">On track</span>
                </header>
                <div class="proof-polish-body">
                  <h3>Ship the launch plan by Friday.</h3>
                  <p>Owners, dependencies, and decisions in one view.</p>
                  <div class="proof-polish-progress"><i></i></div>
                  <footer><span>8 of 11 decisions closed</span><b>Review plan →</b></footer>
                </div>
              </article>
            )}

            {proof.id === 'distill' && (
              <article class="proof-distill proof-distill--after">
                <header><strong>Revenue</strong><span>Last 30 days</span></header>
                <div class="proof-distill-primary"><b>$84,218</b><span>+12.4% vs June</span></div>
                <div class="proof-distill-chart"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
                <footer><span>Orders <b>1,248</b></span><span>Conversion <b>3.8%</b></span></footer>
              </article>
            )}

            {proof.id === 'clarify' && (
              <article class="proof-clarify proof-clarify--after">
                <header><span>New project</span><small>Step 1 of 3</small></header>
                <h3>What should this project improve?</h3>
                <p>Choose one focus. You can add more context next.</p>
                <div class="proof-clarify-options"><span>Activation</span><span>Retention</span><span>Conversion</span></div>
                <span class="proof-clarify-cta">Use this focus →</span>
              </article>
            )}
          </div>
        </div>

        <div class="hero-proof-seam" aria-hidden="true"></div>
        <input
          class="hero-proof-range"
          type="range"
          min="0"
          max="100"
          value="54"
          aria-label={`Reveal the improved ${proof.command} example`}
          data-proof-range
        />
      </div>
    ))}
  </div>

  <div class="hero-proof-tabs" role="tablist" aria-label="Preview Impeccable commands">
    {proofs.map((proof, index) => (
      <button
        type="button"
        role="tab"
        class:list={['hero-proof-tab', { 'is-active': index === 0 }]}
        id={`hero-proof-tab-${proof.id}`}
        aria-controls={`hero-proof-panel-${proof.id}`}
        aria-label={`${proof.command} ${proof.label}`}
        aria-selected={index === 0 ? 'true' : 'false'}
        tabindex={index === 0 ? 0 : -1}
        data-proof-tab={proof.id}
      >
        {proof.command}
      </button>
    ))}
  </div>
</section>