/* Preek AI — Animated Phone Hero
   Premium wellness; calm choreographed motion.
   Mounts into every .phone-hero-mount[data-lang] element on the page.
*/

const { useState, useEffect, useMemo } = React;

/* --- Tiny iconography --- */
const IconBowl = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M3 11h18a9 9 0 0 1-9 9 9 9 0 0 1-9-9z" />
    <path d="M7 7c1.2-1.4 2-1.4 3 0M13 6c1 1 1 2 0 3" />
  </svg>
);
const IconHeart = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z" />
  </svg>
);
const IconMoon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M21 13a8 8 0 1 1-10-10 6.5 6.5 0 0 0 10 10z" />
  </svg>
);
const IconSparkle = () => (
  <svg viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3zM18 14l.9 2.1L21 17l-2.1.9L18 20l-.9-2.1L15 17l2.1-.9L18 14z" />
  </svg>
);
const IconWifi = () => (
  <svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 10a11 11 0 0 1 14 0l-1.4 1.4a9 9 0 0 0-11.2 0L5 10zm2.8 2.8a7 7 0 0 1 8.4 0l-1.4 1.4a5 5 0 0 0-5.6 0l-1.4-1.4zM12 16.5a2 2 0 1 1-.001 4.001A2 2 0 0 1 12 16.5z"/></svg>
);
const IconSignal = () => (
  <svg viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="14" width="3" height="6" rx="0.5"/><rect x="8" y="10" width="3" height="10" rx="0.5"/><rect x="13" y="6" width="3" height="14" rx="0.5"/><rect x="18" y="2" width="3" height="18" rx="0.5"/></svg>
);
const IconBattery = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <rect x="2" y="7" width="18" height="10" rx="2" />
    <rect x="4" y="9" width="11" height="6" rx="1" fill="currentColor" stroke="none" />
    <rect x="21" y="10" width="1.5" height="4" rx="0.5" fill="currentColor" stroke="none" />
  </svg>
);

/* --- Conversation scripts (2 per language) --- */
const CONVOS = {
  ko: [
    [
      { who: "ai",   text: "안녕하세요, 어머니. 오늘 컨디션은 어떠세요?" },
      { who: "user", text: "괜찮아. 아침은 죽 한 그릇 했고." },
      { who: "ai",   text: "잘 챙기셨네요. 산책은 다녀오셨어요?" },
    ],
    [
      { who: "ai",   text: "어제는 일찍 주무셨다고 들었어요." },
      { who: "user", text: "응, 여섯 시쯤 일어났어." },
      { who: "ai",   text: "푹 쉬셨다니 다행이에요. 차 한 잔 어떠세요?" },
    ],
  ],
  en: [
    [
      { who: "ai",   text: "Good morning, Mom. How are you feeling today?" },
      { who: "user", text: "Doing alright. Had some porridge with tea." },
      { who: "ai",   text: "That sounds lovely. Have you been out for a walk yet?" },
    ],
    [
      { who: "ai",   text: "You went to bed early last night, I heard." },
      { who: "user", text: "Yes — woke up around six, felt rested." },
      { who: "ai",   text: "I'm glad. Shall we plan a quiet morning?" },
    ],
  ],
  ja: [
    [
      { who: "ai",   text: "おはようございます、お母さん。今日の調子はいかがですか?" },
      { who: "user", text: "大丈夫よ。朝はお粥を一杯いただいたわ。" },
      { who: "ai",   text: "しっかり召し上がりましたね。お散歩はされましたか?" },
    ],
    [
      { who: "ai",   text: "昨夜は早めにお休みになったそうですね。" },
      { who: "user", text: "ええ、六時ごろに目が覚めたわ。" },
      { who: "ai",   text: "ゆっくり休めて何よりです。お茶でも一杯いかがですか?" },
    ],
  ],
};

const TITLES = {
  ko: { eyebrow: "WELLNESS CHECK-IN", title: "엄마와의 통화", name: "엄마 · Preek AI", status: "통화 중 · 02:14", summary: "오늘의 가족 요약 · 가족에게 전달됨", just: "방금" },
  en: { eyebrow: "WELLNESS CHECK-IN", title: "A call with mom",  name: "Mom · Preek AI",   status: "On call · 02:14",  summary: "Gentle summary ready · Sent to family", just: "just now" },
  ja: { eyebrow: "WELLNESS CHECK-IN", title: "母との通話",        name: "お母さん · Preek AI", status: "通話中 · 02:14",   summary: "今日のまとめ · ご家族へ送信", just: "たった今" },
};

const CARDS = {
  ko: [
    { pos: "top-left",    icon: <IconBowl/>,  label: "MEAL",  text: "아침 · 죽과 차" },
    { pos: "mid-right",   icon: <IconHeart/>, label: "MOOD",  text: "오늘 · 조용한 목소리" },
    { pos: "bottom-left", icon: <IconMoon/>,  label: "SLEEP", text: "푹 잤어요 · 6시 기상" },
  ],
  en: [
    { pos: "top-left",    icon: <IconBowl/>,  label: "MEAL",  text: "Porridge with tea" },
    { pos: "mid-right",   icon: <IconHeart/>, label: "MOOD",  text: "Quieter voice today" },
    { pos: "bottom-left", icon: <IconMoon/>,  label: "SLEEP", text: "Slept well · up at 6" },
  ],
  ja: [
    { pos: "top-left",    icon: <IconBowl/>,  label: "MEAL",  text: "朝食 · お粥とお茶" },
    { pos: "mid-right",   icon: <IconHeart/>, label: "MOOD",  text: "今日 · 静かな声色" },
    { pos: "bottom-left", icon: <IconMoon/>,  label: "SLEEP", text: "よく眠れた · 6時起床" },
  ],
};

/* --- Voice waveform (10 bars, randomized delay) --- */
function Wave() {
  const delays = useMemo(() => Array.from({length: 10}, () => (Math.random() * 1.4).toFixed(2)), []);
  return (
    <div className="ph-wave" aria-hidden="true">
      {delays.map((d, i) => <i key={i} style={{ animationDelay: `${d}s` }} />)}
    </div>
  );
}

/* --- Phone screen interior --- */
function PhoneScreen({ lang }) {
  const t = TITLES[lang] || TITLES.en;
  const scripts = CONVOS[lang] || CONVOS.en;
  const [scriptIdx, setScriptIdx] = useState(0);
  const [step, setStep] = useState(0); // how many bubbles shown

  useEffect(() => {
    setScriptIdx(0);
    setStep(0);
  }, [lang]);

  useEffect(() => {
    const current = scripts[scriptIdx];
    if (step < current.length) {
      const t = setTimeout(() => setStep(s => s + 1), 1600);
      return () => clearTimeout(t);
    }
    // hold, then clear + advance script
    const hold = setTimeout(() => {
      setStep(0);
      setScriptIdx(i => (i + 1) % scripts.length);
    }, 2400);
    return () => clearTimeout(hold);
  }, [step, scriptIdx, scripts]);

  const visible = scripts[scriptIdx].slice(0, step);

  return (
    <div className="ph-screen">
      <div className="ph-status" aria-hidden="true">
        <span>9:41</span>
        <span className="ph-notch" />
        <span className="ph-icons">
          <IconSignal/>
          <IconWifi/>
          <IconBattery/>
        </span>
      </div>

      <div className="ph-header" style={{display:'none'}}>
        <div className="ph-eyebrow">{t.eyebrow}</div>
        <h3 className="ph-title">{t.title}</h3>
      </div>

      <div className="ph-call">
        <div className="ph-avatar" aria-hidden="true">M</div>
        <div className="ph-call-meta">
          <span className="ph-call-name">{t.name}</span>
          <span className="ph-call-status">
            <span className="ph-live-dot" />
            {t.status}
          </span>
        </div>
        <Wave/>
      </div>

      <div className="ph-convo">
        {visible.map((b, i) => (
          <div key={`${scriptIdx}-${i}`} className={`ph-bubble ${b.who}`}>{b.text}</div>
        ))}
      </div>

      <div className="ph-summary">
        <IconSparkle/>
        <span>{t.summary}</span>
        <span className="ph-summary-meta">{t.just}</span>
      </div>
    </div>
  );
}

/* --- Outer hero (glow, pulses, floating cards, phone) --- */
function PhoneHero({ lang }) {
  const cards = CARDS[lang] || CARDS.en;
  return (
    <div className="ph-stage" data-lang={lang}>
      <div className="ph-glow" aria-hidden="true" />
      <div className="ph-pulse p1" aria-hidden="true" />
      <div className="ph-pulse p2" aria-hidden="true" />
      <div className="ph-pulse p3" aria-hidden="true" />

      <div className="ph-phone" aria-hidden="true">
        <PhoneScreen lang={lang} />
      </div>

    </div>
  );
}

/* --- Mount into every .phone-hero-mount on the page --- */
(function mountAll() {
  const nodes = document.querySelectorAll(".phone-hero-mount");
  nodes.forEach(node => {
    const lang = node.getAttribute("data-lang") || "en";
    ReactDOM.createRoot(node).render(<PhoneHero lang={lang} />);
  });
})();