/* Hero demo bubble — the centerpiece.
   Before/after chat card. Left bubble cycles through 3 inputs every 4s.
   Right bubble types out the polished version, retypes on tone change. */

const { motion, AnimatePresence } = window.FM;
const L = window.Lucide;

const DEMO_INPUTS = [
  {
    raw: 'bro can u send the deck till EOD, very urgent yaar',
    polished: {
      Professional: "Could you share the deck by end of day? It's time-sensitive — appreciate it.",
      Casual: "Hey, mind sending the deck by EOD today? It's pretty urgent.",
      Concise: 'Please send the deck by EOD — urgent.',
    },
  },
  {
    raw: 'Pls do the needful and revert back asap',
    polished: {
      Professional: 'Please take care of this at your earliest, and let me know once it’s done.',
      Casual: 'Could you handle this and get back to me when you can?',
      Concise: 'Please action this and reply when done.',
    },
  },
  {
    raw: 'Maine usko bola but woh nahi sun raha, what to do',
    polished: {
      Professional: "I've raised this with him, but he isn't acting on it. How would you like me to proceed?",
      Casual: "I told him already, but he's not listening. Any thoughts on what I should do?",
      Concise: 'I flagged it; he isn’t responding. Suggestions?',
    },
  },
];

const TONES = ['Professional', 'Casual', 'Concise'];

const useTypewriter = (text, speed = 22) => {
  const [out, setOut] = React.useState('');
  React.useEffect(() => {
    setOut('');
    let i = 0;
    let cancelled = false;
    const tick = () => {
      if (cancelled) return;
      i++;
      setOut(text.slice(0, i));
      if (i < text.length) setTimeout(tick, speed);
    };
    const id = setTimeout(tick, 220);
    return () => { cancelled = true; clearTimeout(id); };
  }, [text, speed]);
  return out;
};

const HeroDemo = () => {
  const [idx, setIdx] = React.useState(0);
  const [tone, setTone] = React.useState('Professional');
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % DEMO_INPUTS.length), 6000);
    return () => clearInterval(t);
  }, [paused]);

  const item = DEMO_INPUTS[idx];
  const typed = useTypewriter(item.polished[tone], 18);
  const done = typed === item.polished[tone];

  return (
    <div
      className="relative w-full max-w-[920px] mx-auto"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      {/* Halo */}
      <div aria-hidden className="absolute -inset-10 -z-10 pointer-events-none">
        <div className="absolute left-[10%] top-[10%] size-[260px] rounded-full bg-sky-brand/25 blur-[80px]" />
        <div className="absolute right-[10%] bottom-[10%] size-[260px] rounded-full bg-fuchsia-brand/25 blur-[80px]" />
      </div>

      <div className="glass-strong rounded-3xl p-5 sm:p-7 shadow-ring relative overflow-hidden">
        {/* tiny window chrome row */}
        <div className="flex items-center justify-between mb-5">
          <div className="flex items-center gap-2">
            <span className="size-2.5 rounded-full bg-white/15"></span>
            <span className="size-2.5 rounded-full bg-white/15"></span>
            <span className="size-2.5 rounded-full bg-white/15"></span>
            <span className="ml-3 text-[11px] uppercase tracking-[0.2em] text-white/40">Live demo · WhatsApp</span>
          </div>
          <div className="flex items-center gap-1.5 text-[11px] text-white/40">
            <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
            Enwrite connected
          </div>
        </div>

        <div className="grid sm:grid-cols-2 gap-4 sm:gap-5">
          {/* RAW (rose tint) */}
          <div className="relative">
            <div className="text-[10.5px] uppercase tracking-[0.22em] text-rose-300/70 mb-2">You typed</div>
            <div className="relative rounded-2xl rounded-tl-md p-4 text-[15px] leading-relaxed text-white/85"
                 style={{
                   background: 'linear-gradient(180deg, rgba(248,113,113,0.08), rgba(248,113,113,0.03))',
                   border: '1px solid rgba(248,113,113,0.22)',
                 }}>
              <AnimatePresence mode="wait">
                <motion.p
                  key={idx + '-raw'}
                  initial={{ opacity: 0, y: 6 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -6 }}
                  transition={{ duration: 0.35 }}
                  className="m-0"
                >
                  {item.raw}
                </motion.p>
              </AnimatePresence>
            </div>
            <div className="mt-2 flex items-center gap-1.5 text-[11px] text-white/35">
              <L.Clock size={11} /> typed in a hurry
            </div>
          </div>

          {/* POLISHED (emerald tint) */}
          <div className="relative">
            <div className="flex items-center justify-between mb-2">
              <div className="text-[10.5px] uppercase tracking-[0.22em] text-emerald-300/80">Enwrite</div>
              <div className="flex items-center gap-1">
                {TONES.map((t) => (
                  <button
                    key={t}
                    onClick={() => setTone(t)}
                    className={
                      'rounded-full px-2.5 py-1 text-[10.5px] font-medium transition-all duration-200 ' +
                      (tone === t
                        ? 'text-white shadow-[inset_0_0_0_1px_rgba(255,255,255,0.18)] bg-white/10'
                        : 'text-white/50 hover:text-white/80 hover:bg-white/5')
                    }
                  >
                    {t}
                  </button>
                ))}
              </div>
            </div>
            <div className="relative rounded-2xl rounded-tr-md p-4 text-[15px] leading-relaxed min-h-[112px]"
                 style={{
                   background: 'linear-gradient(180deg, rgba(16,185,129,0.10), rgba(16,185,129,0.03))',
                   border: '1px solid rgba(16,185,129,0.28)',
                 }}>
              <span className={'text-white/95 ' + (done ? '' : 'caret')}>{typed}</span>
            </div>
            <div className="mt-2 flex items-center justify-between text-[11px] text-white/45">
              <span className="inline-flex items-center gap-1.5">
                <L.Sparkles size={11} className="text-fuchsia-300" /> Rewritten in 1.9s
              </span>
              <span className="inline-flex items-center gap-1.5">
                <L.ShieldCheck size={11} className="text-emerald-300/80" /> Not logged
              </span>
            </div>
          </div>
        </div>

        {/* Keyboard toolbar mock */}
        <div className="mt-6 rounded-2xl glass p-2 flex items-center justify-between">
          <div className="flex items-center gap-1.5">
            <button className="relative inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-[12px] font-semibold text-white"
                    style={{ background: 'var(--grad)', boxShadow: '0 0 28px -4px rgba(217,70,239,0.45)' }}>
              <L.Wand2 size={13} />
              Enwrite
            </button>
            <div className="hidden sm:flex items-center gap-1 pl-2 border-l border-white/10 ml-1">
              {TONES.map(t => (
                <span key={t} className={
                  'rounded-lg px-2 py-1 text-[11px] ' +
                  (t === tone ? 'bg-white/10 text-white' : 'text-white/45')
                }>{t}</span>
              ))}
            </div>
          </div>
          <div className="flex items-center gap-1 text-white/50">
            <button className="rounded-lg p-1.5 hover:bg-white/5" aria-label="Undo"><L.Undo2 size={14} /></button>
            <button className="rounded-lg p-1.5 hover:bg-white/5" aria-label="Voice"><L.Mic size={14} /></button>
            <button className="rounded-lg p-1.5 hover:bg-white/5" aria-label="Settings"><L.SlidersHorizontal size={14} /></button>
          </div>
        </div>

        {/* progress dots */}
        <div className="mt-4 flex items-center justify-center gap-1.5">
          {DEMO_INPUTS.map((_, i) => (
            <button
              key={i}
              onClick={() => setIdx(i)}
              aria-label={'Show example ' + (i + 1)}
              className={
                'h-1 rounded-full transition-all duration-300 ' +
                (i === idx ? 'w-6 bg-white/70' : 'w-1.5 bg-white/15 hover:bg-white/30')
              }
            />
          ))}
        </div>
      </div>
    </div>
  );
};

window.HeroDemo = HeroDemo;
window.DEMO_INPUTS = DEMO_INPUTS;
window.TONES = TONES;