// sections.jsx — Bio, Philosophy, Duo, Gallery, Contact

const { useState: useStateS, useEffect: useEffectS } = React;

function Bio({ t }) {
  const b = t.bio;
  return (
    <section className="section bio" id="bio" data-screen-label="02 Bio">
      <div className="wrap">
        <div className="grid">
          <div className="portrait reveal">
            <img src="images/ramon-libertadores.jpg" alt="" />
          </div>
          <div className="body">
            <div className="eyebrow mono-label reveal">{b.eyebrow}</div>
            <h2 className="reveal" style={{['--reveal-delay']: '80ms'}}>
              {b.title_a} <em>{b.title_b}</em>
            </h2>
            <p className="lead reveal" style={{['--reveal-delay']: '160ms'}}>{b.lead}</p>
            <p className="reveal" style={{['--reveal-delay']: '220ms'}}>{b.p1}</p>
            <p className="reveal" style={{['--reveal-delay']: '280ms'}}>{b.p2}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Philosophy({ t }) {
  const p = t.philo;
  return (
    <section className="section philo" id="filosofia" data-screen-label="04 Filosofía">
      <div className="wrap">
        <div className="inner">
          <div className="philo-left">
            <div className="mono-label reveal" style={{marginBottom: 24}}>{p.eyebrow}</div>
            <h2 className="reveal">{p.title_a} <em>{p.title_b}</em></h2>
            <figure className="philo-photo reveal" style={{['--reveal-delay']: '120ms'}}>
              <img src="images/ramon-pensativo.webp" alt="" />
            </figure>
          </div>
          <div className="tenets">
            {p.tenets.map((it, i) => (
              <div key={i} className="tenet reveal" style={{['--reveal-delay']: `${i * 80}ms`}}>
                <div className="n">{it.n}</div>
                <div>
                  <h3>{it.h}</h3>
                  <p>{it.p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="voices">
          <div className="lbl mono-label">{p.voices_lbl}</div>
          <div className="grid">
            {p.voices.map((v, i) => (
              <div key={i} className="v reveal" style={{['--reveal-delay']: `${i * 60}ms`}}>
                <p>“{v.q}”</p>
                <cite>— {v.a}</cite>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Duo({ t }) {
  const d = t.duo;
  return (
    <section className="duo" id="duo" data-screen-label="05 Díaz & Díaz">
      <div className="wrap">
        <div className="stage">
          <div className="copy">
            <div className="mono-label on-dark reveal" style={{marginBottom: 24}}>{d.eyebrow}</div>
            <h2 className="reveal">
              {d.title_a} <em>{d.title_b}</em>
            </h2>
            <p className="reveal" style={{['--reveal-delay']: '120ms'}}>{d.p1}</p>
            <p className="reveal" style={{['--reveal-delay']: '180ms'}}>{d.p2}</p>
            <div className="sig reveal" style={{['--reveal-delay']: '240ms'}}>
              <div className="name">
                {d.sig_a}
                <small>{d.sig_a_role}</small>
              </div>
              <div className="name">
                {d.sig_b}
                <small>{d.sig_b_role}</small>
              </div>
            </div>
          </div>
          <div className="photo reveal" style={{['--reveal-delay']: '80ms'}}>
            <img src="images/duo-photo.jpeg" alt="" />
          </div>
        </div>
      </div>
    </section>
  );
}

function Gallery({ t }) {
  const g = t.gallery;
  const images = [
    'images/gal-01.jpeg', 'images/gal-02.jpeg', 'images/gal-03.jpeg',
    'images/gal-04.jpeg', 'images/gal-05.jpeg', 'images/gal-06.jpeg',
    'images/gal-07.jpeg', 'images/gal-08.jpeg', 'images/gal-09.jpeg',
    'images/gal-10.jpg',  'images/gal-11.webp', 'images/gal-12.jpg',
    'images/gal-13.jpeg', 'images/gal-14.jpeg', 'images/gal-15.jpeg',
    'images/gal-16.jpg',  'images/gal-17.webp',
  ];
  return (
    <section className="section gallery" id="archivo" data-screen-label="06 Galería">
      <div className="wrap">
        <div className="head reveal">
          <div>
            <div className="mono-label" style={{marginBottom: 18}}>{g.eyebrow}</div>
            <h2>{g.title_a} <em>{g.title_b}</em></h2>
          </div>
        </div>

        <div className="masonry">
          {images.map((src, i) => (
            <div key={src} className={`item it-${(i % 8) + 1} reveal`} style={{['--reveal-delay']: `${(i % 8) * 50}ms`}}>
              <img src={src} alt="" loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact({ t }) {
  const c = t.contact;
  const [sent, setSent] = useStateS(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 3000);
  };
  return (
    <section className="contact" id="contacto" data-screen-label="07 Contacto">
      <div className="wrap">
        <div className="top reveal">
          <div>
            <div className="mono-label on-dark" style={{marginBottom: 22}}>{c.eyebrow}</div>
            <h2>{c.title_a}<br/>
              <em>{c.title_b_a}<br/>{c.title_b_b}<br/>{c.title_b_c}</em>
            </h2>
          </div>
        </div>

        <form className="form reveal" onSubmit={onSubmit}>
          <div className="field">
            <label>{c.f_name}</label>
            <input type="text" required />
          </div>
          <div className="field">
            <label>{c.f_phone}</label>
            <input type="tel" required />
          </div>
          <div className="field full">
            <label>{c.f_msg}</label>
            <textarea rows={3}></textarea>
          </div>
          <div className="submit">
            <button type="submit">
              {sent ? `✓ ${c.sent}` : c.send}
              {!sent && <span>→</span>}
            </button>
          </div>
        </form>

        <div className="foot">
          <div>{c.footer_right}</div>
          <div className="socials">
            <a href="https://instagram.com/ramondiaz_dt" target="_blank" rel="noopener">Instagram · @ramondiaz_dt</a>
            <a href="https://x.com/ramondiaz9dt" target="_blank" rel="noopener">X · @ramondiaz9dt</a>
          </div>
        </div>

        <div className="colossus serif" aria-hidden="true">{c.colossus}</div>
      </div>
    </section>
  );
}

Object.assign(window, { Bio, Philosophy, Duo, Gallery, Contact });