// ─── Inquiry — serious, multi-step, premium ────────────────────────────

function Inquiry() {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    name: '', email: '', company: '', role: '',
    projectType: [], stage: '', timeline: '', budget: '',
    description: '', tone: '', source: '', contactPref: 'Email',
  });
  const [submitted, setSubmitted] = useState(false);
  const requestId = useRef(`ANS-${Math.random().toString(36).slice(2, 6).toUpperCase()}-${Date.now().toString(36).toUpperCase().slice(-4)}`);

  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const toggleMulti = (k, v) => setData((d) => ({ ...d, [k]: d[k].includes(v) ? d[k].filter(x => x !== v) : [...d[k], v] }));

  const types = ['Brand film', 'Launch campaign', 'Campaign system', 'Concept / Treatment', 'Series / Episodic', 'Still imagery', 'Motion identity', 'Studio advisory'];
  const stages = ['Just exploring', 'Brief is forming', 'Brief is locked', 'Needs to move now'];
  const budgets = [
    { v: 'under-25', tier: 'SMALL', r: '$10K – $25K', d: 'A single deliverable, concept sprint, or short film.' },
    { v: 'mid', tier: 'STANDARD', r: '$25K – $100K', d: 'A brand film, a launch piece, or a short campaign.' },
    { v: 'large', tier: 'LARGE', r: '$100K – $500K', d: 'A multi-asset campaign or ongoing creative system.' },
    { v: 'retainer', tier: 'RETAINER', r: 'Quarterly', d: 'Continuous production and creative direction.' },
  ];
  const timelines = [
    { v: 'immediate', l: 'Immediate', s: 'Under 2 weeks' },
    { v: 'planned', l: 'Planned', s: '2–6 weeks' },
    { v: 'flexible', l: 'Flexible', s: '6–12 weeks' },
    { v: 'exploratory', l: 'Exploratory', s: 'No hard deadline' },
  ];

  const steps = [
    { n: '01', l: 'Introduction' },
    { n: '02', l: 'The Brief' },
    { n: '03', l: 'Shape' },
    { n: '04', l: 'Send' },
  ];

  const canAdvance = () => {
    if (step === 0) return data.name && data.email.includes('@') && data.company;
    if (step === 1) return data.projectType.length && data.description.length > 20;
    if (step === 2) return data.timeline && data.budget;
    return true;
  };

  const submit = async () => {
    setSubmitted(true);
    window.scrollTo({ top: document.getElementById('inquiry').offsetTop - 80, behavior: 'smooth' });
  };

  if (submitted) {
    return (
      <section id="inquiry" style={{ padding: '180px 0', borderTop: '1px solid var(--border)', minHeight: '80vh' }}>
        <div className="container">
          <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '8px 16px', border: '1px solid var(--ember)', marginBottom: 40 }}>
              <span style={{ width: 6, height: 6, background: 'var(--ember)', animation: 'emberPulse 2s infinite' }} />
              <span className="mono" style={{ fontSize: 10, color: 'var(--ember)' }}>BRIEF RECEIVED</span>
            </div>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 6vw, 80px)', fontWeight: 500, color: 'var(--bone)', lineHeight: 1.05, marginBottom: 32 }}>
              Thank you<span style={{ color: 'var(--signal)' }}>.</span><br />
              <span className="italic" style={{ color: 'var(--parchment)' }}>We'll be in touch.</span>
            </h2>
            <p style={{ color: 'var(--parchment)', fontSize: 17, lineHeight: 1.7, maxWidth: 520, margin: '0 auto 48px' }}>
              Your brief will be read by a human — usually within 48 hours. If we're a fit, we'll propose a 30-minute alignment call. No decks, no pitches.
            </p>
            <div style={{ display: 'inline-grid', gridTemplateColumns: 'auto auto', gap: '14px 32px', padding: '24px 32px', border: '1px solid var(--tungsten)', textAlign: 'left' }}>
              {[['Reference', requestId.current], ['Received', new Date().toISOString().slice(0, 10) + ' · ' + new Date().toTimeString().slice(0, 5)], ['Response', 'Within 48 hours'], ['Routing', 'Adam Cohen · Director']].map(([k, v]) => (
                <React.Fragment key={k}>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--tungsten)' }}>{k.toUpperCase()}</span>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--bone)' }}>{v}</span>
                </React.Fragment>
              ))}
            </div>
            <div style={{ marginTop: 60 }}>
              <button onClick={() => { setSubmitted(false); setStep(0); setData({ name:'',email:'',company:'',role:'',projectType:[],stage:'',timeline:'',budget:'',description:'',tone:'',source:'',contactPref:'Email' }); }} className="btn ghost">Submit another brief</button>
            </div>
          </div>
          <style>{`@keyframes emberPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }`}</style>
        </div>
      </section>
    );
  }

  return (
    <section id="inquiry" style={{ padding: '180px 0 140px', borderTop: '1px solid var(--border)', background: 'rgba(42,42,40,0.25)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }} className="inq-grid">
          {/* Left — context */}
          <div>
            <div className="mono" style={{ color: 'var(--ember)', marginBottom: 20, display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 6, height: 6, background: 'var(--signal)' }} />
              INTAKE · § 09
            </div>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 68px)', fontWeight: 500, color: 'var(--bone)', lineHeight: 1.05, letterSpacing: '-0.01em', marginBottom: 32 }}>
              Start with<br />
              <span className="italic" style={{ color: 'var(--parchment)' }}>the brief.</span>
            </h2>
            <p style={{ color: 'var(--parchment)', fontSize: 16, lineHeight: 1.7, marginBottom: 40, maxWidth: 400 }}>
              Tell us what you're building, what needs to move quickly, and what cannot feel compromised. Every brief is read personally — not routed to a pipeline.
            </p>

            <div style={{ display: 'grid', gap: 16, paddingTop: 32, borderTop: '1px solid var(--border)' }}>
              {[
                ['Response', 'Within 48 hours. Human, not templated.'],
                ['Next step', 'If it\'s a fit, a brief alignment call. No pitches.'],
                ['Discretion', 'NDA on request. Nothing leaves the studio.'],
              ].map(([k, v]) => (
                <div key={k} style={{ display: 'grid', gridTemplateColumns: '100px 1fr', gap: 20 }}>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--parchment)' }}>{k.toUpperCase()}</span>
                  <span style={{ fontSize: 13, color: 'var(--bone)', lineHeight: 1.6 }}>{v}</span>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 56, paddingTop: 32, borderTop: '1px solid var(--border)' }}>
              <p className="mono" style={{ fontSize: 10, color: 'var(--parchment)', marginBottom: 20 }}>— OR, IF A FORM FEELS WRONG</p>
              <a href="mailto:hello@anselstudio.xyz" className="display italic" style={{ fontSize: 22, color: 'var(--bone)', fontWeight: 500, borderBottom: '1px solid var(--signal)', paddingBottom: 6 }}>
                hello@anselstudio.xyz
              </a>
            </div>
          </div>

          {/* Right — form */}
          <div style={{ background: 'var(--obsidian)', padding: 48, border: '1px solid var(--border)' }} className="inq-card">
            {/* Step indicator */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, marginBottom: 48, borderBottom: '1px solid var(--tungsten)' }}>
              {steps.map((s, i) => (
                <div key={s.n} onClick={() => i < step && setStep(i)} style={{
                  paddingBottom: 14, borderBottom: i === step ? '1px solid var(--signal)' : '1px solid transparent',
                  marginBottom: -1, cursor: i < step ? 'pointer' : 'default',
                  transition: 'border-color .3s',
                }}>
                  <div className="mono" style={{ fontSize: 10, color: i <= step ? 'var(--ember)' : 'var(--tungsten)', marginBottom: 4 }}>{s.n}</div>
                  <div style={{ fontSize: 12, color: i <= step ? 'var(--bone)' : 'var(--tungsten)', letterSpacing: '0.02em' }}>{s.l}</div>
                </div>
              ))}
            </div>

            {/* Step panels */}
            {step === 0 && (
              <div style={{ display: 'grid', gap: 28 }}>
                <div className="display italic" style={{ fontSize: 24, color: 'var(--bone)', lineHeight: 1.3 }}>Who are we speaking with?</div>
                <Field label="Full name" required>
                  <input value={data.name} onChange={(e) => update('name', e.target.value)} placeholder="First Last" />
                </Field>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }} className="two-col">
                  <Field label="Email" required><input type="email" value={data.email} onChange={(e) => update('email', e.target.value)} placeholder="you@company.com" /></Field>
                  <Field label="Role / Title"><input value={data.role} onChange={(e) => update('role', e.target.value)} placeholder="CMO, Founder, Creative Director…" /></Field>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }} className="two-col">
                  <Field label="Company" required><input value={data.company} onChange={(e) => update('company', e.target.value)} placeholder="Brand or organization" /></Field>
                  <Field label="How did you find us?"><input value={data.source} onChange={(e) => update('source', e.target.value)} placeholder="Referral, search, social…" /></Field>
                </div>
              </div>
            )}

            {step === 1 && (
              <div style={{ display: 'grid', gap: 28 }}>
                <div className="display italic" style={{ fontSize: 24, color: 'var(--bone)', lineHeight: 1.3 }}>What are you trying to make?</div>
                <Field label="Project type" required hint="Select all that apply">
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 12 }}>
                    {types.map((t) => {
                      const on = data.projectType.includes(t);
                      return (
                        <button key={t} type="button" onClick={() => toggleMulti('projectType', t)} style={{
                          border: on ? '1px solid var(--signal)' : '1px solid var(--tungsten)',
                          color: on ? 'var(--bone)' : 'var(--parchment)',
                          background: on ? 'rgba(226,6,18,0.08)' : 'transparent',
                          padding: '10px 16px',
                          fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase',
                          transition: 'all .24s',
                        }}>{t}</button>
                      );
                    })}
                  </div>
                </Field>
                <Field label="Describe the project" required hint="What it is. Who it's for. What success looks like.">
                  <textarea value={data.description} onChange={(e) => update('description', e.target.value)} placeholder="Be direct. A launch film for a private beta. A campaign system for Q3 product drops. A treatment we can walk into a board meeting with." />
                </Field>
                <Field label="Tone & visual target" hint="References, adjectives, a film, a photographer — anything.">
                  <textarea value={data.tone} onChange={(e) => update('tone', e.target.value)} style={{ minHeight: 72 }} placeholder="Cinematic. Editorial. Quiet. Lubezki. A specific moment in a specific film." />
                </Field>
              </div>
            )}

            {step === 2 && (
              <div style={{ display: 'grid', gap: 28 }}>
                <div className="display italic" style={{ fontSize: 24, color: 'var(--bone)', lineHeight: 1.3 }}>Shape of the engagement.</div>

                <Field label="Timeline" required>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginTop: 12 }} className="grid-4">
                    {timelines.map((t) => {
                      const on = data.timeline === t.v;
                      return (
                        <button key={t.v} type="button" onClick={() => update('timeline', t.v)} style={{
                          border: on ? '1px solid var(--signal)' : '1px solid var(--tungsten)',
                          background: on ? 'rgba(226,6,18,0.06)' : 'transparent',
                          padding: '16px 12px', textAlign: 'left',
                          transition: 'all .24s',
                        }}>
                          <div style={{ fontSize: 13, color: on ? 'var(--bone)' : 'var(--parchment)', marginBottom: 4 }}>{t.l}</div>
                          <div className="mono" style={{ fontSize: 9, color: on ? 'var(--ember)' : 'var(--tungsten)' }}>{t.s}</div>
                        </button>
                      );
                    })}
                  </div>
                </Field>

                <Field label="Budget range" required hint="Orient us — we'll scope around it.">
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 12 }} className="two-col">
                    {budgets.map((b) => {
                      const on = data.budget === b.v;
                      return (
                        <button key={b.v} type="button" onClick={() => update('budget', b.v)} style={{
                          border: on ? '1px solid var(--signal)' : '1px solid var(--tungsten)',
                          background: on ? 'rgba(226,6,18,0.05)' : 'transparent',
                          padding: '18px 18px', textAlign: 'left',
                          transition: 'all .24s',
                        }}>
                          <div className="mono" style={{ fontSize: 9, color: 'var(--ember)', marginBottom: 6 }}>{b.tier}</div>
                          <div className="display" style={{ fontSize: 20, fontWeight: 500, color: 'var(--bone)', marginBottom: 6 }}>{b.r}</div>
                          <div style={{ fontSize: 11, color: 'var(--parchment)', lineHeight: 1.5 }}>{b.d}</div>
                        </button>
                      );
                    })}
                  </div>
                </Field>
              </div>
            )}

            {step === 3 && (
              <div style={{ display: 'grid', gap: 28 }}>
                <div className="display italic" style={{ fontSize: 24, color: 'var(--bone)', lineHeight: 1.3 }}>Before we send.</div>
                <div style={{ background: 'rgba(42,42,40,0.4)', border: '1px solid var(--tungsten)', padding: 28 }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--ember)', marginBottom: 20 }}>YOUR BRIEF · PREVIEW</div>
                  <div style={{ display: 'grid', gap: 14 }}>
                    <Row k="From" v={`${data.name}${data.role ? ', ' + data.role : ''} — ${data.company}`} />
                    <Row k="Email" v={data.email} />
                    <Row k="Project" v={data.projectType.join(' · ') || '—'} />
                    <Row k="Timeline" v={timelines.find(t => t.v === data.timeline)?.l || '—'} />
                    <Row k="Budget" v={budgets.find(b => b.v === data.budget)?.r || '—'} />
                    <Row k="Brief" v={data.description.slice(0, 140) + (data.description.length > 140 ? '…' : '') || '—'} multi />
                  </div>
                </div>
                <Field label="Preferred contact">
                  <div style={{ display: 'flex', gap: 8, marginTop: 12, flexWrap: 'wrap' }}>
                    {['Email', 'Call', 'Video'].map((c) => {
                      const on = data.contactPref === c;
                      return (
                        <button key={c} type="button" onClick={() => update('contactPref', c)} style={{
                          border: on ? '1px solid var(--signal)' : '1px solid var(--tungsten)',
                          background: on ? 'rgba(226,6,18,0.06)' : 'transparent',
                          color: on ? 'var(--bone)' : 'var(--parchment)',
                          padding: '10px 20px',
                          fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase',
                        }}>{c}</button>
                      );
                    })}
                  </div>
                </Field>
                <div className="mono" style={{ fontSize: 10, color: 'var(--parchment)', lineHeight: 1.7, paddingTop: 20, borderTop: '1px solid var(--tungsten)' }}>
                  BY SENDING, YOU AGREE THAT ANSEL MAY CONTACT YOU ABOUT THIS BRIEF. <br />
                  WE DON'T SELL, TRACK, OR SHARE INQUIRIES. EVER.
                </div>
              </div>
            )}

            {/* Nav */}
            <div style={{ marginTop: 48, paddingTop: 28, borderTop: '1px solid var(--tungsten)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--parchment)' }}>
                STEP {step + 1} / 4 &nbsp;·&nbsp; <span style={{ color: 'var(--tungsten)' }}>REF · {requestId.current}</span>
              </div>
              <div style={{ display: 'flex', gap: 12 }}>
                {step > 0 && (
                  <button onClick={() => setStep(step - 1)} className="btn ghost">← Back</button>
                )}
                {step < 3 ? (
                  <button onClick={() => canAdvance() && setStep(step + 1)}
                    disabled={!canAdvance()}
                    className="btn primary"
                    style={{ opacity: canAdvance() ? 1 : 0.35, cursor: canAdvance() ? 'pointer' : 'not-allowed' }}>
                    Continue <span className="arrow">→</span>
                  </button>
                ) : (
                  <button onClick={submit} className="btn primary">Send brief <span className="arrow">→</span></button>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 960px) { .inq-grid { grid-template-columns: 1fr !important; gap: 60px !important; } }
        @media (max-width: 640px) {
          .inq-card { padding: 28px 20px !important; }
          .two-col { grid-template-columns: 1fr !important; }
          .grid-4 { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function Field({ label, required, hint, children }) {
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 2 }}>
        <span className="mono" style={{ fontSize: 10, color: 'var(--parchment)' }}>{label}{required && <span style={{ color: 'var(--signal)', marginLeft: 4 }}>*</span>}</span>
        {hint && <span className="mono" style={{ fontSize: 9, color: 'var(--tungsten)', textTransform: 'none', letterSpacing: '0.04em' }}>· {hint}</span>}
      </div>
      {children}
    </div>
  );
}

function Row({ k, v, multi }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '90px 1fr', gap: 16, alignItems: multi ? 'flex-start' : 'baseline' }}>
      <span className="mono" style={{ fontSize: 9, color: 'var(--tungsten)' }}>{k.toUpperCase()}</span>
      <span style={{ fontSize: 13, color: 'var(--bone)', lineHeight: 1.5, wordBreak: 'break-word' }}>{v}</span>
    </div>
  );
}

window.Inquiry = Inquiry;