/* global React, Reveal, TypeReveal, Marquee */

function ServicesPage({ t, setPage }) {
  return (
    <>
      <section className="about-hero">
        <div className="container">
          <div className="eyebrow" style={{marginBottom: '2rem'}}>— {t.nav.services} / 2026</div>
          <h1 className="display-xl" style={{marginBottom: '2rem'}}>
            <TypeReveal text={t.services_page.title_a} /><br/>
            <TypeReveal text={t.services_page.title_b} delay={300} />
          </h1>
          <Reveal delay={600}>
            <p style={{maxWidth: '52ch', fontSize: '1.15rem', color: 'var(--fg-1)'}}>{t.services_page.sub}</p>
          </Reveal>
        </div>
      </section>

      <section style={{paddingTop: 0}}>
        <div className="container">
          {t.services_page.details.map((d, i) => (
            <Reveal key={i} delay={i * 50}>
              <div className="service-detail">
                <div>
                  <div className="service-detail-num">{d.num}</div>
                </div>
                <div>
                  <h3>{d.title}</h3>
                  <p>{d.body}</p>
                  <ul className="deliverables-list">
                    {d.deliverables.map((dv, j) => <li key={j}>{dv}</li>)}
                  </ul>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <Marquee items={t.marquee} />

      <section className="cta-final">
        <div className="container-tight" style={{position: 'relative'}}>
          <Reveal>
            <h2 className="cta-final-headline">
              {t.cta.headline_a}<br/>
              <span style={{color: 'var(--violet)'}}>{t.cta.headline_b}</span><br/>
              {t.cta.headline_c}
            </h2>
            <a href="#" className="btn btn-primary" onClick={(e) => { e.preventDefault(); setPage('contact'); }}>
              <span>{t.cta.btn}</span>
              <span className="arrow">→</span>
            </a>
          </Reveal>
        </div>
      </section>
    </>
  );
}

function AboutPage({ t, setPage }) {
  const ap = t.about_page;
  return (
    <>
      <section className="about-hero">
        <div className="container">
          <div className="eyebrow" style={{marginBottom: '2rem'}}>— {ap.eyebrow}</div>
          <h1 className="display-xl" style={{marginBottom: '3rem'}}>
            <TypeReveal text={ap.title_a} /><br/>
            <span style={{color: 'var(--violet)', fontStyle: 'italic'}}><TypeReveal text={ap.title_b} delay={300} /></span>
          </h1>
          <Reveal delay={600}>
            <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '3rem', maxWidth: '1100px'}} className="about-lead-grid">
              <p style={{fontSize: '1.15rem'}}>{ap.lead}</p>
              <p style={{fontSize: '1.15rem', color: 'var(--fg-2)'}}>{ap.lead2}</p>
            </div>
          </Reveal>
        </div>
      </section>

      <section>
        <div className="container">
          <Reveal>
            <div className="section-head">
              <div className="label"><span className="num">{ap.values_eyebrow}</span></div>
              <div><h2 className="display-lg">{ap.values_title}</h2></div>
            </div>
          </Reveal>
          <div className="values-grid">
            {ap.values.map((v, i) => (
              <Reveal key={i} delay={i * 60}>
                <div className="value-card">
                  <div className="value-num">{v.num}</div>
                  <h3 className="value-title">{v.title}</h3>
                  <p style={{color: 'var(--fg-2)'}}>{v.desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <Reveal>
            <div className="section-head">
              <div className="label"><span className="num">{ap.team_eyebrow}</span></div>
              <div>
                <h2 className="display-lg">{ap.team_title}</h2>
                <p style={{marginTop: '1.5rem', maxWidth: '50ch', color: 'var(--fg-2)'}}>{ap.team_desc}</p>
              </div>
            </div>
          </Reveal>
          <div className="team-grid">
            {ap.team.map((m, i) => (
              <Reveal key={i} delay={i * 50}>
                <div className="team-member">
                  <div className="team-photo">
                    <span className="placeholder-tag">[ portrait · {m.name.split(' ')[0].toLowerCase()} ]</span>
                  </div>
                  <div className="team-name">{m.name}</div>
                  <div className="team-role">{m.role}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="cta-final">
        <div className="container-tight" style={{position: 'relative'}}>
          <Reveal>
            <h2 className="cta-final-headline">
              {t.cta.headline_a}<br/>
              <span style={{color: 'var(--violet)'}}>{t.cta.headline_b}</span><br/>
              {t.cta.headline_c}
            </h2>
            <a href="#" className="btn btn-primary" onClick={(e) => { e.preventDefault(); setPage('contact'); }}>
              <span>{t.cta.btn}</span>
              <span className="arrow">→</span>
            </a>
          </Reveal>
        </div>
      </section>
    </>
  );
}

function ContactPage({ t }) {
  const cp = t.contact_page;
  const [form, setForm] = React.useState({
    name: '', company: '', email: '', message: '',
    budget: '', services: []
  });
  const [sent, setSent] = React.useState(false);

  const updateField = (k, v) => setForm(f => ({...f, [k]: v}));
  const toggleService = (s) => setForm(f => ({
    ...f,
    services: f.services.includes(s) ? f.services.filter(x => x !== s) : [...f.services, s]
  }));

  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };

  return (
    <>
      <section className="about-hero">
        <div className="container">
          <div className="eyebrow" style={{marginBottom: '2rem'}}>— {cp.eyebrow}</div>
          <h1 className="display-xl" style={{marginBottom: '2rem'}}>
            <TypeReveal text={cp.title_a} /><br/>
            <span style={{color: 'var(--violet)', fontStyle: 'italic'}}><TypeReveal text={cp.title_b} delay={300} /></span>
          </h1>
          <Reveal delay={600}>
            <p style={{maxWidth: '52ch', fontSize: '1.15rem'}}>{cp.sub}</p>
          </Reveal>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="contact-grid">
            <Reveal>
              <div>
                {cp.info.map((info, i) => (
                  <div key={i} className="contact-info-block">
                    <div className="k">{info.k}</div>
                    <div className="v">{info.v}</div>
                  </div>
                ))}
              </div>
            </Reveal>

            <Reveal delay={150}>
              <form onSubmit={submit}>
                <div className="field">
                  <label>{cp.form.name}</label>
                  <input type="text" value={form.name} onChange={e => updateField('name', e.target.value)} required />
                </div>
                <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem'}}>
                  <div className="field">
                    <label>{cp.form.company}</label>
                    <input type="text" value={form.company} onChange={e => updateField('company', e.target.value)} />
                  </div>
                  <div className="field">
                    <label>{cp.form.email}</label>
                    <input type="email" value={form.email} onChange={e => updateField('email', e.target.value)} required />
                  </div>
                </div>

                <div className="field">
                  <label>{cp.form.services}</label>
                  <div className="budget-chips" style={{marginTop: '0.6rem'}}>
                    {cp.form.services_chips.map((s, i) => (
                      <button type="button"
                              key={i}
                              className={`chip ${form.services.includes(s) ? 'active' : ''}`}
                              onClick={() => toggleService(s)}>
                        {s}
                      </button>
                    ))}
                  </div>
                </div>

                <div className="field">
                  <label>{cp.form.budget}</label>
                  <div className="budget-chips" style={{marginTop: '0.6rem'}}>
                    {cp.form.budget_chips.map((b, i) => (
                      <button type="button"
                              key={i}
                              className={`chip ${form.budget === b ? 'active' : ''}`}
                              onClick={() => updateField('budget', b)}>
                        {b}
                      </button>
                    ))}
                  </div>
                </div>

                <div className="field">
                  <label>{cp.form.message}</label>
                  <textarea value={form.message} onChange={e => updateField('message', e.target.value)} required />
                </div>

                <button type="submit" className="btn btn-primary" style={{marginTop: '1rem'}}>
                  <span>{sent ? cp.form.sent : cp.form.submit}</span>
                  <span className="arrow">→</span>
                </button>
              </form>
            </Reveal>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { ServicesPage, AboutPage, ContactPage });