// How it works with interactive demo + Availability

function HowItWorks({ t }) {
  const [active, setActive] = useState(0);

  // Demo content per step
  const demos = [
    [
      { who: 'child', label: 'Child', text: t.how.steps[0].d }
    ],
    [
      { who: 'child', label: 'Child speaks', text: "Didi, photosynthesis kaise hota hai?" },
      { who: 'idna', label: 'IDNA understood', text: "Got it — tum puchh rahe ho photosynthesis kaise hota hai. Chalo samjhte hain." }
    ],
    [
      { who: 'idna', label: 'Example', text: "Ek paudha socho — jaise tumhare ghar ka tulsi ka paudha." },
      { who: 'idna', label: 'Concept', text: "Sunlight + paani + carbon dioxide → khana (glucose) + oxygen." },
      { who: 'idna', label: 'Check', text: "Ab batao — agar paudhe ko sunlight na mile to kya hoga?" }
    ],
    [
      { who: 'child', label: 'Child', text: "Samajh nahi aaya…" },
      { who: 'idna', label: 'Adapts', text: "Koi baat nahi. Socho tum bina khana khaye kitni der reh sakte ho? Paudha bhi waise hi…" }
    ]
  ];

  return (
    <section className="how" id="product">
      <div className="container">
        <div className="section-label">
          <span className="left">§ 03 — {t.how.label}</span>
          <span className="right">CLICK A STEP</span>
        </div>
        <div className="how-head">
          <h2 className="how-title">{t.how.title}</h2>
          <div className="how-hint">→ tap any step to see a live example</div>
        </div>
        <div className="how-wrap">
          <div className="how-steps">
            {t.how.steps.map((s, i) => (
              <div
                key={i}
                className={`how-step ${active === i ? 'active' : ''}`}
                onClick={() => setActive(i)}
              >
                <div className="sn">{s.n}</div>
                <div>
                  <div className="st">{s.t}</div>
                  <div className="sd">{s.d}</div>
                </div>
              </div>
            ))}
          </div>
          <div className="how-demo" key={active}>
            {demos[active].map((d, i) => (
              <div
                className={`demo-turn ${d.who}`}
                key={i}
                style={{
                  opacity: 0, transform: 'translateY(10px)',
                  animation: `msgIn 500ms ${i * 260}ms cubic-bezier(.2,.8,.2,1) forwards`
                }}
              >
                <div className="demo-avatar">{d.who === 'child' ? 'आ' : 'I'}</div>
                <div>
                  <div className="demo-label">{d.label}</div>
                  <div className="demo-bubble">{d.text}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Availability({ t }) {
  return (
    <section className="avail">
      <div className="container">
        <div className="avail-row">
          <div>
            <div className="avail-badge">● {t.avail.pilot}</div>
            <div className="avail-title">{t.avail.live}</div>
            <div className="avail-note">{t.avail.soon}</div>
          </div>
          <div className="subj-block">
            <h4>Class 8 CBSE</h4>
            <div className="subj-list">
              {t.avail.subjects.map(s => <span className="subj" key={s}>{s}</span>)}
            </div>
          </div>
          <div className="subj-block">
            <h4>Class 9 CBSE</h4>
            <div className="subj-list">
              {t.avail.subjects.map(s => <span className="subj" key={s}>{s}</span>)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;
window.Availability = Availability;