// Languages typographic wall + Parents + FAQ + Closer

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

  const handlePlay = (i, phrase, lang) => {
    setPlayingIdx(i);
    // Try browser TTS for real playback
    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);
        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;