// EYEQ — Multi-step "Start a Project" CTA + Footer

const { useState: useStateC, forwardRef: forwardRefC, useImperativeHandle: useImpHandleC, useRef: useRefC } = React;

const STEPS = [
  { key: 'type',     prompt: <>I am looking for a <em>…</em></> },
  { key: 'budget',   prompt: <>My ballpark <em>budget</em> is…</> },
  { key: 'when',     prompt: <>I'd like to shoot <em>around</em>…</> },
  { key: 'contact',  prompt: <>And here's how to <em>reach</em> me.</> },
  { key: 'done',     prompt: null },
];

const CTASection = forwardRefC(function CTASection(props, ref) {
  const [step, setStep] = useStateC(0);
  const [answers, setAnswers] = useStateC({
    type: null,
    budget: null,
    when: '',
    name: '',
    email: '',
    company: '',
    brief: '',
  });
  const sectionRef = useRefC(null);

  useImpHandleC(ref, () => ({
    scrollTo: () => {
      sectionRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    },
  }));

  const set = (k, v) => setAnswers(a => ({ ...a, [k]: v }));

  const canNext = () => {
    if (step === 0) return !!answers.type;
    if (step === 1) return !!answers.budget;
    if (step === 2) return answers.when.trim().length > 1;
    if (step === 3) return answers.name.trim() && /@/.test(answers.email);
    return false;
  };

  const next = () => {
    if (!canNext()) return;
    setStep(s => Math.min(s + 1, STEPS.length - 1));
  };
  const back = () => setStep(s => Math.max(s - 1, 0));

  return (
    <section className="section cta-section" id="contact" ref={sectionRef}>
      <div className="cta-wrap">
        <div className="cta-pitch">
          <div className="section-idx">09 — START A PROJECT · BESPOKE INTAKE</div>
          <h2 style={{ marginTop: 14 }}>
            Tell us what you<br />want to <em>make.</em>
          </h2>
          <p>
            Not a contact form — a four-question intake. We respond personally within 24 hours,
            with a director assigned to your enquiry.
          </p>
          <div className="cta-pitch-info">
            <div>
              <div className="lbl">Studios</div>
              <div className="val">Mumbai · Delhi · <em>LA</em></div>
            </div>
            <div>
              <div className="lbl">Response</div>
              <div className="val">Within <em>24 hours</em></div>
            </div>
            <div>
              <div className="lbl">Direct line</div>
              <div className="val">+91 22 4070 0026</div>
            </div>
            <div>
              <div className="lbl">Email</div>
              <div className="val">hello@<em>eyeq.studio</em></div>
            </div>
          </div>
        </div>

        <div className="cta-form">
          <div className="cta-form-head">
            <span className="cta-form-step">
              {step < STEPS.length - 1
                ? <>STEP {String(step + 1).padStart(2, '0')} OF 04 · {STEPS[step].key.toUpperCase()}</>
                : <>SUBMITTED · CONFIRMATION</>}
            </span>
            <div className="cta-form-progress">
              {[0, 1, 2, 3].map(i => (
                <span key={i} className={i <= step ? 'done' : ''} />
              ))}
            </div>
          </div>

          {step === 0 && (
            <>
              <h3 className="cta-step-prompt serif">{STEPS[0].prompt}</h3>
              <div className="cta-options">
                {window.CTA_TYPES.map(t => (
                  <button
                    key={t.key}
                    className={`cta-option ${answers.type === t.key ? 'selected' : ''}`}
                    onClick={() => set('type', t.key)}
                  >
                    <div className="cta-option-icon">/ TYPE {t.tag}</div>
                    <div className="cta-option-name serif">
                      {t.name.replace(t.italic, '')}<em>{t.italic}</em>
                    </div>
                    <div className="cta-option-desc">{t.desc}</div>
                  </button>
                ))}
              </div>
            </>
          )}

          {step === 1 && (
            <>
              <h3 className="cta-step-prompt serif">{STEPS[1].prompt}</h3>
              <div className="cta-budgets">
                {window.CTA_BUDGETS.map(b => (
                  <button
                    key={b.range}
                    className={`cta-budget ${answers.budget === b.range ? 'selected' : ''}`}
                    onClick={() => set('budget', b.range)}
                  >
                    <span className="cta-budget-range serif">{b.range}</span>
                    <span className="cta-budget-tier">{b.tier}</span>
                  </button>
                ))}
              </div>
              <div style={{ marginTop: 18, fontSize: 12, color: 'var(--text-faint)', fontFamily: 'var(--mono)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
                Indicative only · We tailor scope to story.
              </div>
            </>
          )}

          {step === 2 && (
            <>
              <h3 className="cta-step-prompt serif">{STEPS[2].prompt}</h3>
              <input
                className="cta-input"
                placeholder="e.g. mid-October 2026, three days in Jaipur…"
                value={answers.when}
                onChange={e => set('when', e.target.value)}
                autoFocus
              />
              <textarea
                className="cta-input cta-textarea"
                placeholder="Anything else we should know? (Locations, talent, deliverables…)"
                value={answers.brief}
                onChange={e => set('brief', e.target.value)}
                style={{ marginTop: 28 }}
              />
            </>
          )}

          {step === 3 && (
            <>
              <h3 className="cta-step-prompt serif">{STEPS[3].prompt}</h3>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
                <input className="cta-input" placeholder="Your name *"     value={answers.name}    onChange={e => set('name', e.target.value)} autoFocus />
                <input className="cta-input" placeholder="Email *"           value={answers.email}   onChange={e => set('email', e.target.value)} />
                <input className="cta-input" placeholder="Company / brand"   value={answers.company} onChange={e => set('company', e.target.value)} style={{ gridColumn: 'span 2' }} />
              </div>
            </>
          )}

          {step === 4 && (
            <div className="cta-success">
              <div className="cta-success-icon">✓</div>
              <h3 className="serif">Thank you, <em>{answers.name.split(' ')[0] || 'friend'}.</em></h3>
              <p>
                Your brief is on its way to our directors. We respond within 24 hours —
                often sooner. In the meantime, watch our 2025 reel from the link we've just emailed you.
              </p>
              <div style={{ marginTop: 32, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.15em', color: 'var(--gold)', textTransform: 'uppercase' }}>
                REF · EYQ-{Date.now().toString(36).toUpperCase().slice(-6)}
              </div>
            </div>
          )}

          {step < 4 && (
            <div className="cta-foot">
              <button className="cta-back" onClick={back} disabled={step === 0}>← Back</button>
              <button className="cta-next" onClick={next} disabled={!canNext()}>
                {step === 3 ? 'Send brief' : 'Continue'}
                <span className="arr" />
              </button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
});

function Footer() {
  return (
    <footer className="footer" id="footer">
      <div className="footer-signature">eye<em>q</em></div>

      <div className="footer-grid">
        <div className="footer-brand">
          <h3 className="serif">
            Visual<br />Storytelling,<br /><em>Redefined.</em>
          </h3>
          <p>
            EYEQ is a cinematography &amp; photography studio building films and stills for brands,
            broadcasters, and the kinds of celebrations people remember by their light.
          </p>
        </div>

        <div className="footer-col">
          <h4>Studio</h4>
          <ul>
            <li><a href="#work">Work</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#process">Process</a></li>
            <li><a href="#press">Press</a></li>
            <li><a href="#footer">Careers</a></li>
            <li><a href="#footer">Journal</a></li>
          </ul>
        </div>

        <div className="footer-col">
          <h4>Locations</h4>
          <ul>
            <li>Mumbai · BKC</li>
            <li>New Delhi · Mehrauli</li>
            <li>Los Angeles · Silver Lake</li>
            <li>&nbsp;</li>
            <li><a href="mailto:hello@eyeq.studio">hello@eyeq.studio</a></li>
            <li><a href="tel:+912240700026">+91 22 4070 0026</a></li>
          </ul>
        </div>

        <div className="footer-col">
          <h4>Follow</h4>
          <ul>
            <li><a href="#">Instagram</a></li>
            <li><a href="#">Vimeo</a></li>
            <li><a href="#">Behance</a></li>
            <li><a href="#">LinkedIn</a></li>
            <li><a href="#">Spotify · Mixtapes</a></li>
            <li><a href="#">Substack · The Cut</a></li>
          </ul>
        </div>
      </div>

      <div className="footer-bottom">
        <div>© 2014 — 2026 EYEQ Studios Pvt. Ltd. · All frames reserved.</div>
        <div style={{ display: 'flex', gap: 24 }}>
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Sitemap</a>
          <a href="#">Site colophon · Fraunces &amp; Inter</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { CTASection, Footer });