/* Celestia Pictures — Careers, Contact, Footer */

const { useState: useSt, useEffect: useEf, useRef: useRf } = React;

/* ============ CAREERS / TALENT SUBMISSION ============ */
function Careers() {
  const tabs = [
    { id: 'actor',    label: 'Actor Submission' },
    { id: 'writer',   label: 'Writer Submission' },
    { id: 'director', label: 'Director Submission' },
    { id: 'vendor',   label: 'Vendor Partnership' },
    { id: 'crew',     label: 'Production Crew' },
    { id: 'careers',  label: 'Careers' },
  ];
  const [active, setActive] = useSt('actor');
  const [submitting, setSubmitting] = useSt(false);
  const [sendError, setSendError] = useSt('');
  const [form, setForm] = useSt({
    name: '', email: '', phone: '', portfolio: '', social: '', message: '',
    resume: '',
  });
  const [errs, setErrs] = useSt({});
  const [sent, setSent] = useSt(false);
  const fileInputRef = useRf(null);

  const labelByTab = {
    actor: 'Showreel / Portfolio Link',
    writer: 'Writing Samples Link',
    director: 'Director Reel Link',
    vendor: 'Company / Service Website',
    crew: 'Reel or Project Link',
    careers: 'Portfolio / LinkedIn',
  };

  const onChange = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const onFile = (e) => {
    const f = e.target.files && e.target.files[0];
    if (f) setForm({ ...form, resume: f.name });
  };

  const validate = () => {
    const ne = {};
    if (!form.name.trim()) ne.name = 'Please enter your name.';
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) ne.email = 'Enter a valid email address.';
    if (form.phone && !/^[\+\d\s\-\(\)]{6,}$/.test(form.phone)) ne.phone = 'Enter a valid phone number.';
    if (!form.message.trim()) ne.message = 'Please share a short message.';
    setErrs(ne);
    return Object.keys(ne).length === 0;
  };

  const submit = async (e) => {
    e.preventDefault();
    if (!validate()) return;
    setSubmitting(true);
    setSendError('');
    try {
      const fd = new FormData();
      Object.entries(form).forEach(([k, v]) => fd.append(k, v));
      fd.append('category', active);
      if (fileInputRef.current && fileInputRef.current.files[0]) {
        fd.append('resume_file', fileInputRef.current.files[0]);
      }
      const res = await fetch('submit.php', { method: 'POST', body: fd });
      let data = {};
      try { data = await res.json(); } catch (_) {}
      if (!res.ok || !data.ok) {
        const msg = data.detail || data.error || `Server responded ${res.status}`;
        setSendError(msg);
        return;
      }
      setSent(true);
    } catch (err) {
      setSendError(err && err.message ? err.message : 'Network error');
    } finally {
      setSubmitting(false);
    }
  };

  const reset = () => {
    setSent(false);
    setForm({ name: '', email: '', phone: '', portfolio: '', social: '', message: '', resume: '' });
    setErrs({});
  };

  return (
    <section id="careers" style={{ background: 'var(--black-2)', borderTop: '1px solid var(--line-soft)' }}>
      <div className="wrap">
        <div className="section-head">
          <div className="meta">
            <span className="eyebrow">08 — Careers & Talent</span>
            <h2 className="display reveal">Join the next generation of <em className="italic">storytelling.</em></h2>
          </div>
          <div className="reveal d1">
            <p className="lede">
              Celestia Pictures is always discovering exceptional talent —
              actors, writers, directors, technicians and production partners
              ready to build the future of premium cinematic storytelling.
            </p>
          </div>
        </div>

        <div className="career-tabs reveal">
          {tabs.map((t) => (
            <button key={t.id}
                    className={`tab ${active === t.id ? 'active' : ''}`}
                    onClick={() => { setActive(t.id); setSent(false); }}>
              {t.label}
            </button>
          ))}
        </div>

        {!sent ? (
          <form className="form-grid reveal" onSubmit={submit} noValidate>
            <div className="field">
              <label>Full Name <span className="req">*</span></label>
              <input type="text" value={form.name} onChange={onChange('name')} placeholder="Your full name" />
              {errs.name && <span className="err">{errs.name}</span>}
            </div>
            <div className="field">
              <label>Email Address <span className="req">*</span></label>
              <input type="email" value={form.email} onChange={onChange('email')} placeholder="you@studio.com" />
              {errs.email && <span className="err">{errs.email}</span>}
            </div>
            <div className="field">
              <label>Phone Number</label>
              <input type="tel" value={form.phone} onChange={onChange('phone')} placeholder="+91 ..." />
              {errs.phone && <span className="err">{errs.phone}</span>}
            </div>
            <div className="field">
              <label>{labelByTab[active]}</label>
              <input type="url" value={form.portfolio} onChange={onChange('portfolio')} placeholder="https://" />
            </div>
            <div className="field">
              <label>Social Media Link</label>
              <input type="url" value={form.social} onChange={onChange('social')} placeholder="Instagram, LinkedIn, etc." />
            </div>
            <div className="field file">
              <label className="dropzone" htmlFor="resume-input">
                <span>
                  {form.resume ? form.resume : 'Resume / Reel — PDF, DOC, MP4 (Max 20MB)'}
                </span>
                <span className="browse">Browse</span>
                <input id="resume-input" ref={fileInputRef} type="file"
                       accept=".pdf,.doc,.docx,.mp4,.mov" onChange={onFile} />
              </label>
            </div>
            <div className="field full">
              <label>Tell us about yourself <span className="req">*</span></label>
              <textarea rows="5" value={form.message} onChange={onChange('message')}
                placeholder="A short note about your work, experience, and what you'd like to bring to Celestia Pictures." />
              {errs.message && <span className="err">{errs.message}</span>}
            </div>
            <div className="full form-actions">
              <span className="note">
                Your submission goes directly to our talent team at <a href="mailto:ap@celestiapictures.com" style={{color:'var(--gold)'}}>ap@celestiapictures.com</a>. We respond within 14 working days.
              </span>
              <button className="btn primary" type="submit" disabled={submitting}>
                {submitting ? 'Sending…' : 'Submit Application'} <span className="arrow">→</span>
              </button>
            </div>
            {sendError && (
              <div className="full" style={{
                gridColumn: '1 / -1',
                border: '1px solid #e07a52',
                background: 'rgba(224,122,82,0.08)',
                padding: '16px 20px',
                color: '#f0b9a0',
                fontFamily: 'var(--font-ui)',
                fontSize: 14,
                lineHeight: 1.55,
              }}>
                <strong style={{display:'block', marginBottom: 6, color:'#e07a52', fontFamily:'var(--font-sans)', fontSize: 11, letterSpacing:'0.3em', textTransform:'uppercase'}}>Could not send</strong>
                {sendError}
                <br/>
                In the meantime please email us directly at <a href="mailto:ap@celestiapictures.com" style={{color:'var(--gold)'}}>ap@celestiapictures.com</a>.
              </div>
            )}
          </form>
        ) : (
          <div className="form-sent reveal">
            <span className="eyebrow no-rule">Submission Received</span>
            <h3 className="display">Thank you, <em>{form.name.split(' ')[0] || 'creator'}.</em></h3>
            <p className="body" style={{maxWidth: '52ch', margin: '0 auto'}}>
              Your application has been received. The Celestia talent team will
              review your submission and reach out if there's a fit on an
              active or upcoming production.
            </p>
            <div style={{marginTop: 24}}>
              <button className="btn ghost" onClick={reset}>
                Submit another <span className="arrow">→</span>
              </button>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

/* ============ CONTACT ============ */
function Contact() {
  return (
    <section id="contact">
      <div className="wrap">
        <div className="section-head">
          <div className="meta">
            <span className="eyebrow">09 — Contact</span>
            <h2 className="display reveal">Let's create <em className="italic">together.</em></h2>
          </div>
          <div className="reveal d1">
            <p className="lede">
              Whether you're a streaming platform, fellow studio, brand,
              investor or storyteller — Celestia is open to the right
              conversations.
            </p>
          </div>
        </div>

        <div className="contact-grid">
          <div className="reveal">
            <div className="contact-block">
              <span className="label">Write to us</span>
              <a className="val" href="mailto:ap@celestiapictures.com">ap@celestiapictures.com</a>
            </div>
            <div className="contact-block">
              <span className="label">Call</span>
              <a className="val" href="tel:+917979978068">+91 79799 78068</a>
            </div>
            <div className="contact-block">
              <span className="label">Studio</span>
              <span className="val sm">
                804, 591 Link Road,<br/>
                Veera Desai Road, Oshiwara,<br/>
                Andheri West, Mumbai,<br/>
                Maharashtra — 400053, India.
              </span>
            </div>
            <div className="contact-block">
              <span className="label">Follow</span>
              <div className="social-row">
                <a href="https://instagram.com/celestiacinema" target="_blank" rel="noreferrer">Instagram</a>
                <a href="https://youtube.com/@celestiacinema" target="_blank" rel="noreferrer">YouTube</a>
                <a href="https://linkedin.com/company/celestiacinema" target="_blank" rel="noreferrer">LinkedIn</a>
                <a href="https://facebook.com/celestiacinema" target="_blank" rel="noreferrer">Facebook</a>
              </div>
            </div>
          </div>

          <div className="reveal d1">
            <div className="map-card">
              <div className="map-grid" />
              <svg className="map-roads" viewBox="0 0 400 500" preserveAspectRatio="none">
                <path d="M 0 180 Q 120 200 240 160 T 400 220" stroke="#2A241A" strokeWidth="1.5" fill="none"/>
                <path d="M 220 0 Q 200 120 240 200 T 200 500" stroke="#2A241A" strokeWidth="1.5" fill="none"/>
                <path d="M 0 320 Q 160 300 280 340 T 400 320" stroke="#2A241A" strokeWidth="1" fill="none"/>
                <path d="M 120 0 L 130 180 L 100 360 L 110 500" stroke="#2A241A" strokeWidth="1" fill="none"/>
              </svg>
              <div className="meta">
                <span><b>19.13°N</b> / <b>72.83°E</b></span>
                <span>Andheri West · Mumbai</span>
              </div>
              <div className="map-pin">
                <span className="dot" />
                <span className="lbl">Celestia HQ</span>
              </div>
              <div style={{position:'absolute', bottom: 16, left: 16, right: 16, display:'flex', justifyContent:'space-between'}}>
                <span className="label">Plate 02 · Locale</span>
                <span className="label" style={{color:'var(--gold)'}}>MMXXVI</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ FOOTER ============ */
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-brand">
            <img src="assets/celestia-vertical.svg" alt="Celestia Pictures" />
            <p>
              A premium cinematic entertainment and content production company
              developing premium films, web series, OTT content, music videos
              and advertising films for Indian and global audiences.
            </p>
          </div>
          <div className="foot-col">
            <h5>Studio</h5>
            <ul>
              <li><a href="#studio" onClick={(e)=>{e.preventDefault(); scrollToSection('studio');}}>About</a></li>
              <li><a href="#services" onClick={(e)=>{e.preventDefault(); scrollToSection('services');}}>Services</a></li>
              <li><a href="#work" onClick={(e)=>{e.preventDefault(); scrollToSection('work');}}>Work</a></li>
              <li><a href="#vision" onClick={(e)=>{e.preventDefault(); scrollToSection('vision');}}>Vision</a></li>
              <li><a href="#team" onClick={(e)=>{e.preventDefault(); scrollToSection('team');}}>Leadership</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Engage</h5>
            <ul>
              <li><a href="#partners" onClick={(e)=>{e.preventDefault(); scrollToSection('partners');}}>Partnerships</a></li>
              <li><a href="#investors" onClick={(e)=>{e.preventDefault(); scrollToSection('investors');}}>Investor Relations</a></li>
              <li><a href="#careers" onClick={(e)=>{e.preventDefault(); scrollToSection('careers');}}>Talent Submission</a></li>
              <li><a href="#careers" onClick={(e)=>{e.preventDefault(); scrollToSection('careers');}}>Careers</a></li>
              <li><a href="#contact" onClick={(e)=>{e.preventDefault(); scrollToSection('contact');}}>Contact</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Reach</h5>
            <ul>
              <li><a href="mailto:ap@celestiapictures.com">ap@celestiapictures.com</a></li>
              <li><a href="tel:+917979978068">+91 79799 78068</a></li>
              <li><a href="https://instagram.com/celestiacinema" target="_blank" rel="noreferrer">Instagram</a></li>
              <li><a href="https://youtube.com/@celestiacinema" target="_blank" rel="noreferrer">YouTube</a></li>
              <li><a href="https://linkedin.com/company/celestiacinema" target="_blank" rel="noreferrer">LinkedIn</a></li>
              <li><a href="https://facebook.com/celestiacinema" target="_blank" rel="noreferrer">Facebook</a></li>
            </ul>
          </div>
        </div>

        <div className="foot-bottom">
          <span>© 2026–2030 Celestia Constrade Private Limited. All Rights Reserved.</span>
          <span className="right">
            <a href="privacy.html">Privacy</a>
            <a href="terms.html">Terms</a>
            <a href="privacy.html#cookies">Cookies</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Careers, Contact, Footer });