// Languages typographic wall + Parents + FAQ + Closer

function Languages({ t }) {
  const [playingIdx, setPlayingIdx] = useState(-1);
  const audioRef = useRef(null);

  const handlePlay = (i, phrase, lang) => {
    // Stop any currently playing audio
    if (audioRef.current) {
      audioRef.current.pause();
      audioRef.current = null;
    }

    // Map language name to audio file
    const audioMap = {
      Hindi: 'hindi', English: 'english', Bengali: 'bengali', Telugu: 'telugu',
      Tamil: 'tamil', Kannada: 'kannada', Malayalam: 'malayalam', Marathi: 'marathi',
      Gujarati: 'gujarati', Odia: 'odia', Punjabi: 'punjabi'
    };
    const audioFile = audioMap[lang];

    if (audioFile) {
      setPlayingIdx(i);
      const audio = new Audio(`/landing-new/assets/voices/${audioFile}.mp3`);
      audioRef.current = audio;
      audio.onended = () => { setPlayingIdx(-1); audioRef.current = null; };
      audio.onerror = () => {
        // Fallback to browser TTS if audio file not found
        setPlayingIdx(-1);
        try {
          if (window.speechSynthesis) {
            window.speechSynthesis.cancel();
            const u = new SpeechSynthesisUtterance(phrase);
            const voiceMap = {
              Hindi: 'hi-IN', English: 'en-IN', Bengali: 'bn-IN', Telugu: 'te-IN',
              Tamil: 'ta-IN', Kannada: 'kn-IN', Malayalam: 'ml-IN', Marathi: 'mr-IN',
              Gujarati: 'gu-IN', Odia: 'or-IN', Punjabi: 'pa-IN'
            };
            u.lang = voiceMap[lang] || 'en-IN';
            u.rate = 0.9;
            u.onend = () => setPlayingIdx(-1);
            setPlayingIdx(i);
            window.speechSynthesis.speak(u);
          }
        } catch(e) {}
      };
      audio.play().catch(() => setPlayingIdx(-1));
    } else {
      // Fallback to browser TTS for unsupported languages
      setPlayingIdx(i);
      try {
        if (window.speechSynthesis) {
          window.speechSynthesis.cancel();
          const u = new SpeechSynthesisUtterance(phrase);
          u.lang = 'en-IN';
          u.rate = 0.9;
          u.onend = () => setPlayingIdx(-1);
          window.speechSynthesis.speak(u);
        }
      } catch(e) {}
      setTimeout(() => setPlayingIdx(p => p === i ? -1 : p), 3500);
    }
  };

  return (
    <section className="langs" id="languages">
      <div className="container">
        <div className="section-label">
          <span className="left">§ 04 — {t.langs.label}</span>
          <span className="right">11 SCRIPTS · ONE IDEA</span>
        </div>
        <div className="langs-head">
          <h2 className="langs-title">{t.langs.title}</h2>
          <div className="langs-sub">{t.langs.sub}</div>
        </div>
        <div className="lang-grid">
          {t.langs.list.map((l, i) => (
            <div
              key={l.name}
              className={`lang-cell ${playingIdx === i ? 'playing' : ''}`}
              onClick={() => handlePlay(i, l.phrase, l.name)}
            >
              <div className="lang-meta">
                <span>{l.name}</span>
                <span>{playingIdx === i ? '♪ …' : '►'}</span>
              </div>
              <div className="lang-script">{l.phrase}</div>
              <div className="lang-region">{l.region}</div>
            </div>
          ))}
        </div>
        <div className="langs-note">* {t.langs.note}</div>
      </div>
    </section>
  );
}

function Parents({ t }) {
  return (
    <section className="parents" id="parents">
      <div className="container">
        <div className="section-label">
          <span className="left">§ 05 — {t.parents.label}</span>
          <span className="right">FOUR COMMITMENTS</span>
        </div>
        <div className="parents-grid">
          {t.parents.items.map((item, i) => (
            <div className="parent-item" key={i}>
              <span className="parent-mark" />
              <div className="parent-num">C/0{i + 1}</div>
              <div className="parent-t">{item.t}</div>
              <div className="parent-d">{item.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ({ t }) {
  const [open, setOpen] = useState(0);
  return (
    <section className="faq" id="faq">
      <div className="container">
        <div className="section-label">
          <span className="left">§ 06 — {t.faq.label}</span>
          <span className="right">TAP TO EXPAND</span>
        </div>
        <div className="faq-head">
          <h2 className="faq-title">{t.faq.label}</h2>
        </div>
        <div className="faq-list">
          {t.faq.items.map((item, i) => (
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="qt">{item.q}</span>
                <span className="qi">+</span>
              </div>
              <div className="faq-a">{item.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Closer({ t }) {
  return (
    <section className="closer" id="start">
      <div className="container">
        <h2>{t.closer.title}</h2>
        <a href="/login" className="btn">{t.closer.cta} <span className="arr">→</span></a>
        <div className="closer-foot">
          <div className="closer-tag">
            {t.closer.tag}
            <small>{t.closer.tag_trans}</small>
          </div>
          <div className="closer-meta">
            <div className="closer-contact">
              <span className="cc-label">{t.closer.contact_label}</span>
              <a href={`mailto:${t.closer.contact}`} className="cc-email">{t.closer.contact}</a>
            </div>
            {t.closer.made}<br />
            {t.closer.addr}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Languages = Languages;
window.Parents = Parents;
window.FAQComp = FAQ;
window.Closer = Closer;