// page-contact.jsx — Contact and Careers page content

const ROLES = [
  { dept: 'Creative',    t: 'Senior Brand Designer',      loc: 'Ludhiana (on-site)',  type: 'Full-time' },
  { dept: 'Performance', t: 'Performance Marketing Lead', loc: 'Ludhiana / Remote',   type: 'Full-time' },
  { dept: 'Production',  t: 'Video Editor — Reels & Ads', loc: 'Ludhiana (on-site)',  type: 'Full-time' },
  { dept: 'Automation',  t: 'CRM & Automation Engineer',  loc: 'Remote (India)',       type: 'Full-time' },
  { dept: 'Operations',  t: 'Client Services Manager',    loc: 'Ludhiana',             type: 'Full-time' },
];

function CareersPage({ setRoute }) {
  return (
    <div className="page">
      <div className="page-head">
        <div className="wrap">
          <h1><TypeReveal>Build the studio<br />with <span className="it">us.</span></TypeReveal></h1>
          <p className="deck">
            We hire slowly and rarely. When we do, we look for people who&rsquo;d rather make real work for real businesses than chase awards at a bigger agency in Delhi or Mumbai.
          </p>
        </div>
      </div>

      <section style={{ paddingTop: 60 }}>
        <div className="wrap">
          {ROLES.map((r, i) => (
            <Reveal key={r.t} className="svc-row" delay={i * 50} onClick={() => setRoute('contact')}>
              <div className="num">{String(i + 1).padStart(2, '0')}</div>
              <h3>{r.t}</h3>
              <p className="desc">{r.dept} · {r.loc} · {r.type}</p>
              <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 8, color: 'var(--accent)' }}>
                Apply <Arrow size={14} />
              </div>
            </Reveal>
          ))}
          <div style={{ padding: '48px 0', textAlign: 'center', borderTop: '1px solid var(--border)', marginTop: 24 }}>
            <p style={{ color: 'var(--muted)', margin: 0 }}>
              Don't see your role?{' '}
              <a onClick={() => setRoute('contact')} style={{ color: 'var(--accent)', cursor: 'pointer', borderBottom: '1px solid currentColor' }}>
                Write to us anyway
              </a>
              {' '}— we keep great people in mind.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

function ContactPage() {
  const [form, setForm] = React.useState({
    name: '', email: '', phone: '', company: '', service: 'branding', budget: '',
    timeline: '', message: ''
  });
  const [submitted, setSubmitted] = React.useState(false);
  const [errors, setErrors] = React.useState({});

  const budgets = ['< ₹1L', '₹1–5L', '₹5–15L', '₹15L+', 'Not sure yet'];
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const validate = () => {
    const errs = {};
    if (!form.name.trim()) errs.name = 'Required';
    if (!form.email.includes('@')) errs.email = 'Need a valid email';
    if (!form.message.trim() || form.message.length < 12) errs.message = 'Tell us a bit more';
    return errs;
  };

  const submit = (e) => {
    e.preventDefault();
    const errs = validate();
    setErrors(errs);
    if (Object.keys(errs).length === 0) {
      setSubmitted(true);
    }
  };

  if (submitted) {
    return (
      <div className="page">
        <div className="page-head">
          <div className="wrap">
            <h1>Thanks, {form.name.split(' ')[0]}.<br />We'll <span className="it">reply within a day.</span></h1>
            <p className="deck">
              Your message is in our queue — you&rsquo;ll hear from Satnam directly. In the meantime, here&rsquo;s a few useful things.
            </p>
          </div>
        </div>
        <section>
          <div className="wrap" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              { t: 'Recent case studies', d: 'Township launches, brand relaunches, political campaigns and Bollywood film promos.' },
              { t: 'Pricing & retainers', d: 'How we scope brand sprints, monthly retainers and per-seat political campaigns.' },
              { t: 'WhatsApp the studio', d: 'For active clients and quick questions — fastest way to reach us most days.' },
            ].map((c, i) => (
              <Reveal key={c.t} className="tcard" delay={i * 100}>
                <h3 style={{ fontSize: 24, letterSpacing: '-0.02em', marginTop: 4 }}>{c.t}</h3>
                <p style={{ color: 'var(--muted)', fontSize: 14, lineHeight: 1.6, margin: 0 }}>{c.d}</p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--ink)', marginTop: 'auto' }}>
                  Open <Arrow size={14} />
                </div>
              </Reveal>
            ))}
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="page">
      <div className="page-head">
        <div className="wrap">
          <h1><TypeReveal>Tell us about<br />your <span className="it">project.</span></TypeReveal></h1>
          <p className="deck">
            The more you share, the better our first reply. If you&rsquo;d rather just say hi, that works too — keep it short.
          </p>
        </div>
      </div>

      <section style={{ paddingTop: 60 }}>
        <div className="wrap">
          <div className="contact-grid">
            <form className="form" onSubmit={submit} noValidate>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                <div className="field">
                  <label>Your name {errors.name && <span style={{ color: 'var(--accent)', textTransform: 'none', letterSpacing: 0, fontFamily: 'var(--f-sans)' }}>· {errors.name}</span>}</label>
                  <input type="text" value={form.name} onChange={update('name')} placeholder="Full name" />
                </div>
                <div className="field">
                  <label>Phone / WhatsApp</label>
                  <input type="tel" value={form.phone} onChange={update('phone')} placeholder="+91 …" />
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                <div className="field">
                  <label>Email {errors.email && <span style={{ color: 'var(--accent)', textTransform: 'none', letterSpacing: 0, fontFamily: 'var(--f-sans)' }}>· {errors.email}</span>}</label>
                  <input type="email" value={form.email} onChange={update('email')} placeholder="you@company.com" />
                </div>
                <div className="field">
                  <label>Company / Project</label>
                  <input type="text" value={form.company} onChange={update('company')} placeholder="Brand or campaign name" />
                </div>
              </div>

              <div className="field">
                <label>What can we help with?</label>
                <select value={form.service} onChange={update('service')}>
                  <option value="branding">Brand identity & naming</option>
                  <option value="real-estate">Real estate marketing</option>
                  <option value="political">Political campaign</option>
                  <option value="performance">Performance marketing</option>
                  <option value="automation">Marketing automation / CRM</option>
                  <option value="content">Content & video production</option>
                  <option value="web">Website & SEO</option>
                  <option value="not-sure">Not sure yet</option>
                </select>
              </div>

              <div className="field">
                <label>Approx. budget</label>
                <div className="budget-chips">
                  {budgets.map(b => (
                    <button type="button" key={b}
                            className={"budget-chip" + (form.budget === b ? " active" : "")}
                            onClick={() => setForm({ ...form, budget: b })}>
                      {b}
                    </button>
                  ))}
                </div>
              </div>

              <div className="field">
                <label>Timeline</label>
                <input type="text" value={form.timeline} onChange={update('timeline')} placeholder="e.g. launch by Diwali, start in 3 weeks" />
              </div>

              <div className="field">
                <label>Project details {errors.message && <span style={{ color: 'var(--accent)', textTransform: 'none', letterSpacing: 0, fontFamily: 'var(--f-sans)' }}>· {errors.message}</span>}</label>
                <textarea value={form.message} onChange={update('message')} placeholder="The shape of the project, what good looks like, who you're trying to reach…" />
              </div>

              <div style={{ marginTop: 12 }}>
                <button type="submit" className="btn btn-primary btn-large">
                  Send message <Arrow size={14} />
                </button>
              </div>
            </form>

            <aside className="contact-meta">
              <dl>
                <dt>Email</dt>
                <dd><a href="mailto:satnamjandu@yahoo.com">satnamjandu@yahoo.com</a></dd>

                <dt>Phone / WhatsApp</dt>
                <dd><a href="tel:+919814640066">+91 98146-40066</a></dd>

                <dt>Studio</dt>
                <dd>Ludhiana, Punjab<br />India · 141 001</dd>

                <dt>Office hours</dt>
                <dd style={{ color: 'var(--muted)', fontSize: 14, fontFamily: 'var(--f-mono)', letterSpacing: '0.06em' }}>MON–SAT · 10:00 → 19:00 IST</dd>

                <dt>Founded by</dt>
                <dd>Satnam Singh<br /><span style={{ color: 'var(--muted)', fontSize: 14 }}>Founder &amp; Creative Director</span></dd>
              </dl>
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ContactPage, CareersPage, ROLES });