/* global React */

function SectionShowcase() {
  const [i, setI] = useState(0);
  const n = SHOWCASE.length;
  const next = () => setI((v) => (v + 1) % n);
  const prev = () => setI((v) => (v - 1 + n) % n);

  useEffect(() => {
    const id = setInterval(next, 5000);
    return () => clearInterval(id);
  }, []);

  const cur = SHOWCASE[i];
  const sideL = SHOWCASE[(i - 1 + n) % n];
  const sideR = SHOWCASE[(i + 1) % n];

  return (
    <section className="section showcase" id="showcase">
      <div className="container">
        <div className="section-head section-head--center">
          <div className="eyebrow" style={{margin: "0 auto"}}>نظرة على التطبيق · App Preview</div>
          <h2>تصميم أنيق<br/>يليق بكتاب الله</h2>
          <p className="lede">واجهة مستخدم هادئة، ألوان مستوحاة من المخطوطات الإسلامية، وتجربة قراءة ممتعة ومريحة للعين.</p>
        </div>

        <div className="showcase__stage">
          <div className="showcase__phone showcase__phone--side">
            <PhoneFrame screen={sideL.screen} scale={.8}/>
          </div>
          <div className="showcase__phone showcase__phone--main">
            <PhoneFrame screen={cur.screen}/>
          </div>
          <div className="showcase__phone showcase__phone--side">
            <PhoneFrame screen={sideR.screen} scale={.8}/>
          </div>
        </div>

        <div className="showcase__caption">
          <h3>{cur.title}</h3>
          <p>{cur.desc}</p>
        </div>

        <div className="showcase__nav">
          <button className="showcase__nav-btn" onClick={prev}><Icon name="arrow-right" size={18}/></button>
          <button className="showcase__nav-btn" onClick={next}><Icon name="arrow-left" size={18}/></button>
        </div>
        <div className="showcase__dots">
          {SHOWCASE.map((_, idx) => (
            <button key={idx} className={"showcase__dot" + (idx === i ? " is-active" : "")} onClick={() => setI(idx)} aria-label={`Slide ${idx + 1}`}/>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SectionShowcase = SectionShowcase;