/* Contact / Free AI Audit page */
const { Container: KC, Reveal: KR, Eyebrow: KE, Mono: KM, PageHeader: KPH, PALETTE: KP } = window;

function ContactPage({ onNavigate, initialPath='audit' }) {
  const [path, setPath] = useState(initialPath);
  const [form, setForm] = useState({
    website:'', email:'', company:'', market:'', help:'', budget:'', consent:false
  });
  const [submitted, setSubmitted] = useState(false);
  const [errors, setErrors] = useState({});

  function validate() {
    const e = {};
    if (!form.website) e.website = 'Required';
    else if (!/\./.test(form.website)) e.website = 'Looks invalid';
    if (!form.email) e.email = 'Required';
    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = 'Looks invalid';
    if (!form.company) e.company = 'Required';
    if (!form.market) e.market = 'Required';
    if (!form.help) e.help = 'Required';
    if (!form.consent) e.consent = 'Required';
    return e;
  }

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

  return (
    <main data-page-root>
      <KPH
        num="07"
        eyebrow="Contact · Two ways in"
        title={<>LET’S TALK<br/>ABOUT THE<br/>NEXT MOVE.</>}
        lede="Pick a 30-minute call to scope a real problem, or request a free AI visibility audit. Either way, the first response comes from a senior."
        color={KP.green}
        art="contact"
        breadcrumbs={[
          { label:'Home', onClick: () => onNavigate('home') },
          { label:'Contact' },
        ]}
      />

      {/* Tab switcher */}
      <section className="py-10 border-b-2 border-ink">
        <KC>
          <div className="inline-flex border-2 border-ink">
            <button onClick={() => setPath('call')} className={`px-5 py-3 num font-bold transition-colors ${path==='call' ? 'text-paper' : 'text-ink hover:bg-paper2'}`} style={path==='call'?{background:KP.blue}:{}}>
              A · Book a 30-min call
            </button>
            <button onClick={() => setPath('audit')} className={`px-5 py-3 num font-bold border-l-2 border-ink transition-colors ${path==='audit' ? 'text-paper' : 'text-ink hover:bg-paper2'}`} style={path==='audit'?{background:KP.purple}:{}}>
              B · Free AI visibility audit
            </button>
          </div>
        </KC>
      </section>

      <section className="py-16 md:py-24">
        <KC>
          <div className="grid grid-cols-12 gap-10">
            {/* Form / Calendly */}
            <div className="col-span-12 md:col-span-8">
              {path === 'call' ? (
                <div>
                  <KE num="A" label="Book a 30-min call" color={KP.blue} />
                  <h2 className="display display-tight text-[40px] md:text-[72px] mt-6 max-w-[18ch]">
                    PICK A TIME.<br/>WE’LL <span style={{color: KP.blue}}>PREPARE</span>.
                  </h2>
                  <p className="text-[16.5px] text-ink/80 leading-[1.6] mt-6 max-w-[52ch]">
                    Tell us the URL of your site in the description field. We’ll come to the call having looked at your channels, surface, and AI visibility — not as a sales pitch, but a real diagnostic conversation.
                  </p>

                  {/* Calendly placeholder */}
                  <div data-asset="calendly-embed" className="mt-10 border-2 border-ink overflow-hidden">
                    <div className="px-5 py-3 border-b-2 border-ink flex items-center justify-between" style={{background: KP.blue, color:'#fff'}}>
                      <span className="num font-bold">calendly.com / marketingmix / 30min</span>
                      <span className="num">Placeholder</span>
                    </div>
                    <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 bg-paper">
                      <div>
                        <div className="num text-mute mb-3 font-bold">Select a date</div>
                        <div className="grid grid-cols-7 gap-1">
                          {['Mo','Tu','We','Th','Fr','Sa','Su'].map(d => <div key={d} className="num text-mute text-center py-1.5">{d}</div>)}
                          {Array.from({length: 28}).map((_,i) => (
                            <button key={i} onClick={() => {}}
                              className="aspect-square text-[13px] font-semibold transition-colors hover:bg-paper2"
                              style={i===15?{background: KP.blue, color:'#fff'}:{}}>
                              {i+1}
                            </button>
                          ))}
                        </div>
                      </div>
                      <div>
                        <div className="num text-mute mb-3 font-bold">Tue, May 28 · EST</div>
                        <div className="space-y-2">
                          {['09:00','10:30','13:00','15:30','17:00'].map((t,i) => (
                            <button key={t} className="w-full text-left px-4 py-3 border-2 display text-[18px] transition-colors"
                              style={i===2?{background: KP.blue, color:'#fff', borderColor: KP.ink}:{borderColor: KP.ink}}>
                              {t}
                            </button>
                          ))}
                        </div>
                        <button className="btn btn-primary btn-sq w-full justify-center mt-4">Confirm 13:00 →</button>
                      </div>
                    </div>
                  </div>
                </div>
              ) : (
                submitted ? (
                  <div className="border-2 border-ink overflow-hidden">
                    <div className="px-5 py-3 border-b-2 border-ink" style={{background: KP.green, color:'#fff'}}>
                      <span className="num font-bold">✓ REQUEST RECEIVED</span>
                    </div>
                    <div className="p-8 md:p-10 bg-paper">
                      <h2 className="display display-tight text-[32px] md:text-[56px] max-w-[20ch]">
                        THANKS. WE’LL BE IN TOUCH WITHIN <span style={{color: KP.green}}>ONE BUSINESS DAY</span>.
                      </h2>
                      <p className="text-[16.5px] text-ink/80 leading-[1.6] mt-6 max-w-[56ch]">
                        We’ll pull live model responses for your domain across ChatGPT, Claude, Gemini, and Perplexity, then send a short PDF with the diagnostic and the top three remediation moves.
                      </p>
                      <div className="mt-6 num text-mute">Reference · MMX-{(form.company || 'audit').replace(/\s/g,'').slice(0,4).toUpperCase()}-{String(Math.floor(Math.random()*9000)+1000)}</div>
                    </div>
                  </div>
                ) : (
                <form onSubmit={submit} className="space-y-7" noValidate>
                  <KE num="B" label="Free AI visibility audit" color={KP.purple} />
                  <h2 className="display display-tight text-[40px] md:text-[72px] mt-2 max-w-[20ch]">
                    TELL US THE <span style={{color: KP.purple}}>BASICS</span>.
                  </h2>
                  <p className="text-[16.5px] text-ink/80 leading-[1.6] mt-4 max-w-[52ch]">
                    We need six fields. A senior pulls the data, runs the diagnostic, and sends a short PDF within one business day.
                  </p>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-6 pt-2">
                    <Field label="Website URL" required error={errors.website} placeholder="https://yourdomain.com" value={form.website} onChange={v => setForm({...form, website:v})} />
                    <Field label="Work email"  required error={errors.email}   placeholder="you@company.com"    value={form.email}   onChange={v => setForm({...form, email:v})} />
                    <Field label="Company name" required error={errors.company} placeholder="Company"           value={form.company} onChange={v => setForm({...form, company:v})} />
                    <Select label="Market / country" required error={errors.market} value={form.market} onChange={v => setForm({...form, market:v})}
                      options={['Canada','United States','Germany','France','Ukraine','UK','Other EU','International']} />
                    <Textarea label="What do you need help with?" required error={errors.help} placeholder="A sentence or two — channels, problem, urgency." value={form.help} onChange={v => setForm({...form, help:v})} cols={2} />
                    <Select label="Budget range (optional)" value={form.budget} onChange={v => setForm({...form, budget:v})}
                      options={['Not sure yet','Under $10k','$10k – $25k','$25k – $50k','$50k – $100k','$100k+']} />
                  </div>

                  <label className="flex items-start gap-3 pt-3 cursor-pointer">
                    <input type="checkbox" checked={form.consent} onChange={e => setForm({...form, consent: e.target.checked})}
                      className="mt-1 w-4 h-4 accent-purple"/>
                    <span className="text-[14.5px] text-ink/80 leading-[1.55] max-w-[60ch]">
                      I consent to Marketing MIX contacting me about this request. I understand my data is used only to respond and is not added to any list.
                      {errors.consent && <span className="block mt-1 num font-bold" style={{color: KP.red}}>Required</span>}
                    </span>
                  </label>

                  <div className="flex flex-wrap items-center gap-4 pt-2">
                    <button type="submit" className="btn btn-primary btn-sq">
                      <span className="w-2 h-2" style={{background: KP.yellow}}></span>
                      Request audit →
                    </button>
                    <span className="num text-mute">Response within 1 business day</span>
                  </div>
                </form>
                )
              )}
            </div>

            {/* Right column · contact info */}
            <aside className="col-span-12 md:col-span-4">
              <div className="border-2 border-ink overflow-hidden">
                <div className="h-2" style={{background: KP.red}}></div>
                <div className="p-5">
                  <KM>Direct</KM>
                  <div className="display text-[20px] mt-2">HELLO@MMIX.BIZ</div>
                  <div className="text-[14px] text-mute mt-1">studio@mmix.biz · for new projects</div>
                </div>
              </div>

              <div className="border-2 border-ink overflow-hidden mt-5">
                <div className="h-2" style={{background: KP.yellow}}></div>
                <div className="p-5">
                  <KM>Offices</KM>
                  <ul className="mt-3 space-y-3">
                    {[
                      ['Ottawa', '208 Booth Street, Ottawa, ON', KP.red],
                      ['Kyiv',   'Studio · Podil',                KP.yellow],
                      ['Berlin', 'EU operations',                 KP.blue],
                      ['Paris',  'EU operations',                 KP.green],
                    ].map(([c, a, col]) => (
                      <li key={c} className="flex items-baseline gap-3">
                        <span className="w-2 h-2 inline-block mt-1" style={{background: col}}></span>
                        <div>
                          <div className="display text-[17px]">{c.toUpperCase()}</div>
                          <div className="num text-mute mt-0.5">{a}</div>
                        </div>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>

              <div className="border-2 border-ink overflow-hidden mt-5">
                <div className="h-2" style={{background: KP.green}}></div>
                <div className="p-5">
                  <KM>Languages</KM>
                  <div className="display-mix text-[16px] font-semibold mt-2">English · Українська · Deutsch · Français · Русский</div>
                </div>
              </div>

              <div className="border-2 border-ink overflow-hidden mt-5">
                <div className="h-2" style={{background: KP.purple}}></div>
                <div className="p-5">
                  <KM>Trust</KM>
                  <div className="grid grid-cols-2 gap-4 mt-3">
                    <div><div className="num text-mute">DUNS</div><div className="display text-[16px] mt-1">68-606-2061</div></div>
                    <div><div className="num text-mute">NCAGE</div><div className="display text-[16px] mt-1">A3G3J</div></div>
                  </div>
                </div>
              </div>
            </aside>
          </div>
        </KC>
      </section>
    </main>
  );
}

/* form atoms */
function Field({ label, required, error, value, onChange, placeholder, type='text' }) {
  return (
    <label className="block">
      <span className="num text-mute font-bold">{label}{required && ' *'}</span>
      <input
        type={type}
        value={value}
        placeholder={placeholder}
        onChange={e => onChange(e.target.value)}
        className={`mt-2 w-full bg-transparent border-b-2 ${error?'border-red':'border-ink'} pb-3 display-mix text-[19px] font-semibold focus:outline-none placeholder:text-mute/50`}
      />
      {error && <span className="num text-red mt-1.5 block font-bold">{error}</span>}
    </label>
  );
}

function Select({ label, required, error, value, onChange, options }) {
  return (
    <label className="block">
      <span className="num text-mute font-bold">{label}{required && ' *'}</span>
      <div className="relative mt-2">
        <select
          value={value}
          onChange={e => onChange(e.target.value)}
          className={`w-full appearance-none bg-transparent border-b-2 ${error?'border-red':'border-ink'} pb-3 display-mix text-[19px] font-semibold focus:outline-none pr-8`}
        >
          <option value="">Select…</option>
          {options.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
        <span className="absolute right-1 bottom-3 text-ink pointer-events-none">▾</span>
      </div>
      {error && <span className="num text-red mt-1.5 block font-bold">{error}</span>}
    </label>
  );
}

function Textarea({ label, required, error, value, onChange, placeholder, cols }) {
  return (
    <label className={`block ${cols===2?'md:col-span-2':''}`}>
      <span className="num text-mute font-bold">{label}{required && ' *'}</span>
      <textarea
        value={value}
        placeholder={placeholder}
        onChange={e => onChange(e.target.value)}
        rows={3}
        className={`mt-2 w-full bg-transparent border-b-2 ${error?'border-red':'border-ink'} pb-3 display-mix text-[19px] font-semibold focus:outline-none placeholder:text-mute/50 resize-none`}
      />
      {error && <span className="num text-red mt-1.5 block font-bold">{error}</span>}
    </label>
  );
}

Object.assign(window, { ContactPage });