d3ro-voice/site/src/sections/HowItWorks.tsx

import { SectionHeader } from '../components/SectionHeader'
import { Crosshair } from '../components/Crosshair'
import { Container } from '../components/Container'
import { Led } from '../components/Led'
import { WaveBars } from '../components/WaveBars'
import { useI18n } from '../i18n'

export function HowItWorks() {
  const { t } = useI18n()

  return (
    <section id="pipeline" className="relative py-24 md:py-32">
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-surface-800/40 to-transparent pointer-events-none" />

      <Container className="relative">
        <SectionHeader
          index={t.pipeline.index}
          title={t.pipeline.title}
          subtitle={t.pipeline.subtitle}
        />

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-start">
          {/* Left: visual panel */}
          <Crosshair className="order-2 lg:order-1">
            <div className="crt-screen rounded-card p-6 md:p-8 aspect-[4/3] flex flex-col justify-between">
              <div className="relative z-10 flex items-center justify-between mb-6">
                <span className="font-mono text-nano uppercase tracking-widest text-brand-amber/60">
                  {t.pipeline.panelTitle}
                </span>
                <div className="flex items-center gap-2">
                  <Led color="green" />
                  <span className="font-mono text-nano uppercase tracking-widest text-neutral-500">{t.pipeline.panelActive}</span>
                </div>
              </div>

              <div className="relative z-10 flex-1 flex flex-col justify-center space-y-4">
                {/* Simulated terminal output */}
                <div className="font-mono text-xs text-neutral-500 leading-relaxed space-y-2">
                  <div className="flex items-center gap-2">
                    <Led color="green" size="sm" />
                    <span className="text-emerald-400/70">{t.pipeline.sttReady}</span>
                    <span className="text-neutral-600">faster-whisper base</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Led color="green" size="sm" />
                    <span className="text-emerald-400/70">{t.pipeline.llmConnected}</span>
                    <span className="text-neutral-600">qwen3:4b @ localhost:11434</span>
                  </div>
                  <div className="h-px bg-white/[0.04] my-3" />
                  <div className="flex items-start gap-2">
                    <Led color="amber" size="sm" pulse className="mt-1" />
                    <div>
                      <span className="text-brand-amber/50 block mb-1">{t.pipeline.transcription}</span>
                      <span className="text-neutral-300">&quot;{t.pipeline.sampleInput}&quot;</span>
                    </div>
                  </div>
                  <div className="flex items-start gap-2">
                    <Led color="green" size="sm" className="mt-1" />
                    <div>
                      <span className="text-emerald-400/50 block mb-1">{t.pipeline.aiPolish}</span>
                      <span className="text-neutral-300">&quot;{t.pipeline.sampleOutput}&quot;</span>
                    </div>
                  </div>
                </div>
              </div>

              <div className="relative z-10 flex items-center justify-between pt-4 border-t border-white/[0.04]">
                <WaveBars className="h-6" />
                <span className="font-mono text-nano text-neutral-600">{t.pipeline.panelLatency}</span>
              </div>
            </div>
          </Crosshair>

          {/* Right: numbered steps */}
          <div className="order-1 lg:order-2 space-y-1">
            {t.pipeline.steps.map((step, i) => (
              <div
                key={i}
                className="group relative flex gap-5 p-5 rounded-card border border-transparent hover:border-white/[0.04] hover:bg-surface-700/30 transition-all"
              >
                {/* Number */}
                <div className="flex-shrink-0 w-12 h-12 rounded-card bg-surface-600 border border-white/[0.06] flex items-center justify-center">
                  <span className="font-mono text-lg font-bold text-brand-amber">{String(i + 1).padStart(2, '0')}</span>
                </div>

                <div className="flex-1 min-w-0">
                  <span className="font-mono text-nano uppercase tracking-widest text-brand-amber/60 block mb-1">
                    {step.label}
                  </span>
                  <h3 className="font-display text-lg font-semibold text-neutral-100 mb-1.5">
                    {step.title}
                  </h3>
                  <p className="text-sm text-neutral-400 leading-relaxed mb-2">
                    {step.description}
                  </p>
                  <span className="inline-block font-mono text-nano text-neutral-600 bg-surface-600/60 px-2.5 py-1 rounded-sm border border-white/[0.03]">
                    {step.detail}
                  </span>
                </div>

                {/* Connector */}
                {i < t.pipeline.steps.length - 1 && (
                  <div className="absolute left-[42px] top-[72px] w-px h-5 bg-gradient-to-b from-surface-300 to-transparent hidden lg:block" />
                )}
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  )
}