/* Persona teaser — "build your own through the app" */
const PersonaTeaser = () => {
  return (
    <section id="persona" className="relative py-32 overflow-hidden">
      <div className="mx-auto max-w-[1400px] px-6 text-center">
        <div className="font-mono text-xs tracking-[0.3em] text-flame mb-6" data-reveal>[ 06 / BUILD YOUR OWN ]</div>
        <h2 className="word-rev text-[clamp(40px,7vw,120px)] leading-[0.95] tracking-[-0.04em] font-bold max-w-[20ch] mx-auto">
          {splitWords("Want something different?")} <span className="serif text-flame">{splitWords("Write your own")}</span> {splitWords("inside the Grippy app.")}
        </h2>
        <p className="mt-10 text-white/60 text-lg md:text-xl max-w-2xl mx-auto leading-relaxed" data-reveal data-reveal-delay="2">
          Industry, tone, scripts, safety rules — describe it your way. Grippy compiles it into a live voice agent in seconds. Available on every plan, from day one.
        </p>

        {/* Prompt console motif */}
        <div className="mt-14 max-w-2xl mx-auto text-left" data-reveal data-reveal-delay="3">
          <div className="rounded-2xl overflow-hidden border border-white/[0.08]" data-tilt="5" data-tilt-glow
               style={{ background: 'linear-gradient(180deg, #0e0e10, #08080a)', boxShadow: '0 30px 80px -30px rgba(0,0,0,0.85), 0 40px 120px -50px rgba(255,87,54,0.18)' }}>
            <div className="flex items-center gap-2.5 px-4 py-2.5 border-b border-white/[0.06]">
              <GrippyMark size={18} radius={5}/>
              <span className="font-mono text-[10px] tracking-[0.2em] text-white/45 uppercase">persona compiler</span>
              <span className="ml-auto font-mono text-[9px] tracking-[0.18em] text-white/30 uppercase">⌘ K</span>
            </div>
            <div className="px-5 py-5">
              <div className="font-mono text-[10px] tracking-[0.22em] text-flame uppercase mb-2.5">Your prompt</div>
              <p className="text-white/85 text-[15px] leading-relaxed">
                “A calm, no-nonsense dispatcher for a 24/7 towing company. Triage emergencies first, quote from my rate sheet, and never promise an ETA under 10 minutes.”
              </p>
              <div className="mt-5 flex items-center gap-2.5 flex-wrap">
                {['Tone: calm', 'Triage: on', 'Rate sheet linked', 'Safety rules · 4'].map(t => (
                  <span key={t} className="inline-flex items-center gap-1.5 bg-white/[0.04] border border-white/[0.08] rounded-md px-2.5 py-1.5 font-mono text-[10px] tracking-[0.04em] text-white/65">
                    <span className="w-1 h-1 rounded-full bg-flame"></span>{t}
                  </span>
                ))}
              </div>
            </div>
            <div className="flex items-center justify-between px-5 py-3 border-t border-white/[0.06] bg-white/[0.015]">
              <span className="inline-flex items-center gap-2 font-mono text-[10px] tracking-[0.18em] text-emerald-400/90 uppercase">
                <span className="relative flex w-1.5 h-1.5"><span className="absolute inset-0 rounded-full bg-emerald-400 animate-ping opacity-60"></span><span className="relative w-1.5 h-1.5 rounded-full bg-emerald-400"></span></span>
                Compiled · agent live
              </span>
              <span className="font-mono text-[10px] tracking-[0.12em] text-white/40">1.8s</span>
            </div>
          </div>
        </div>

        <div className="mt-12 flex justify-center gap-3 flex-wrap" data-reveal data-reveal-delay="3">
          <a href="#cta" className="group inline-flex items-center gap-2 bg-flame hover:bg-ember text-black font-semibold px-7 py-4 rounded-full transition-colors">
            Open the app <span className="transition-transform group-hover:translate-x-1">→</span>
          </a>
          <a href="#cta" className="inline-flex items-center gap-2 border border-line2 hover:border-white/40 text-white/80 hover:text-white px-7 py-4 rounded-full transition-colors">
            Talk to a designer
          </a>
        </div>
      </div>
    </section>
  );
};
window.PersonaTeaser = PersonaTeaser;