/* global React, window */

/* =========================================================
   Founder block
   ========================================================= */
function Founder() {
  const { L } = useLang();
  const F = L.founder;
  return (
    <section className="section" id="founder">
      <div className="container">
        <Reveal><div className="section-eyebrow">{F.eyebrow}</div></Reveal>
        <Reveal delay={60}>
          <h2 className="h-section">
            {F.headline[0]}<br/>{F.headline[1]}
          </h2>
        </Reveal>

        <div className="founder-wrap">
          <Reveal>
            <div>
              <div className="founder-portrait">
                <img className="founder-photo" src="assets/founder-aziz.jpg" alt="Abdulaziz Waheedi" />
                <span className="mono-name">ABDULAZIZ WAHEEDI · FOUNDER</span>
              </div>
              <div className="founder-meta">
                {F.meta.map((m, i) => (
                  <div className="cell" key={i}>
                    <div className="lbl">{m.label}</div>
                    <div className="val">{m.value}</div>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>

          <Reveal delay={80}>
            <div>
              <p className="lead" style={{ fontSize: 22, color: "var(--fg)", lineHeight: 1.5 }}>{F.body}</p>
              <YouTubeFeed inline />
            </div>
          </Reveal>
        </div>
        <div style={{ marginTop: 96 }}><DividerLine /></div>
      </div>
    </section>
  );
}

/* =========================================================
   Fit — Apply if you / Don't apply if you
   ========================================================= */
function Fit() {
  const { L } = useLang();
  const F = L.fit;
  return (
    <section className="section" id="fits">
      <div className="container">
        <Reveal><div className="section-eyebrow">{F.eyebrow}</div></Reveal>
        <Reveal delay={60}>
          <h2 className="h-section">
            {F.headline[0]}<br/>{F.headline[1]}
          </h2>
        </Reveal>

        <div className="fit-grid">
          <Reveal className="fit-card yes">
            <h3>
              <span className="badge"><Icon name="check" size={18} strokeWidth={2} /></span>
              {F.apply.title}
            </h3>
            <ul className="fit-list">
              {F.apply.items.map((it, i) => (
                <li key={i}>
                  <span className="icn"><Icon name="check" size={16} strokeWidth={2} /></span>
                  <span>{it}</span>
                </li>
              ))}
            </ul>
          </Reveal>

          <Reveal delay={80} className="fit-card no">
            <h3>
              <span className="badge"><Icon name="x-mark" size={18} strokeWidth={2} /></span>
              {F.dont.title}
            </h3>
            <ul className="fit-list">
              {F.dont.items.map((it, i) => (
                <li key={i}>
                  <span className="icn"><Icon name="x-mark" size={16} strokeWidth={2} /></span>
                  <span>{it}</span>
                </li>
              ))}
            </ul>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   Tools — Everything you need / Nothing you don't
   ========================================================= */
function Tools() {
  const { L } = useLang();
  const T = L.tools;
  return (
    <section className="section">
      <div className="container">
        <Reveal><div className="section-eyebrow">{T.eyebrow}</div></Reveal>
        <Reveal delay={60}>
          <h2 className="h-section">
            {T.headline[0]}<br/>{T.headline[1]}
          </h2>
        </Reveal>
        <Reveal delay={120}><p className="lead">{T.sub}</p></Reveal>

        <div style={{ marginTop: 32 }}>
          <Reveal>
            <div className="mono upper" style={{ fontSize: 12, letterSpacing: "0.14em", color: "var(--fg-subtle)" }}>
              {T.giveTitle}
            </div>
          </Reveal>
        </div>

        <div className="tools-grid">
          {T.give.map((g, i) => (
            <Reveal key={i} delay={i * 50} className="tool-tile">
              <div className="icn-wrap"><Icon name={g.icon} size={20} strokeWidth={1.6} /></div>
              <h4>{g.title}</h4>
              <p>{g.body}</p>
            </Reveal>
          ))}
        </div>

        <Reveal className="dont-row" style={{ marginTop: 32 }}>
          <span className="label">{T.dontTitle}</span>
          {T.dont.map((d, i) => (
            <span key={i} className="dont-chip">
              <Icon name="ban" size={12} strokeWidth={1.8} />
              {d}
            </span>
          ))}
        </Reveal>

        <div style={{ marginTop: 96 }}><DividerLine /></div>
      </div>
    </section>
  );
}

/* =========================================================
   What You Get — 6 tiles
   ========================================================= */
function WhatYouGet() {
  const { L } = useLang();
  const G = L.get;
  return (
    <section className="section">
      <div className="container">
        <Reveal><div className="section-eyebrow">{G.eyebrow}</div></Reveal>
        <Reveal delay={60}>
          <h2 className="h-section">
            {G.headline[0]}<br/>{G.headline[1]}
          </h2>
        </Reveal>

        <div className="get-grid">
          {G.items.map((it, i) => (
            <Reveal key={i} delay={i * 60} className="get-tile">
              <div className="icn-wrap"><Icon name={it.icon} size={22} strokeWidth={1.6} /></div>
              <h4>{it.title}</h4>
              <p>{it.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Founder, Fit, Tools, WhatYouGet });