/* global React, window */
const DS = window.ACONADesignSystem_e7dd84;
const { Eyebrow, Button, Field, Input, Textarea, Select, ArrowLink, SiteHeader, SiteFooter } = DS;

const IMG = '../../assets/photography/';
const LOGO = '../../assets/logos/';
const NAV = [
  { label: 'Services', href: '#services' },
  { label: 'Experience', href: '#/experience' },
  { label: 'Gallery', href: '#/gallery' },
  { label: 'About', href: '#/about' },
];

const CCSS = 'acona-intake-css';
if (typeof document !== 'undefined' && !document.getElementById(CCSS)) {
  const st = document.createElement('style');
  st.id = CCSS;
  st.textContent = `
  .intake{display:grid;grid-template-columns:0.85fr 1.15fr;gap:0;min-height:calc(100vh - 82px);}
  .intake__rail{background:var(--navy-900);color:var(--paper);padding:var(--section-y) clamp(2rem,4vw,4rem);
    display:flex;flex-direction:column;gap:34px;}
  .intake__rail h1{font-family:var(--font-display);font-weight:700;font-size:var(--text-3xl);line-height:1.02;
    letter-spacing:-0.02em;color:#fff;margin:20px 0 0;}
  .intake__lead{font-family:var(--font-sans);font-size:var(--text-md);line-height:1.6;color:var(--navy-200);margin:0;}
  .intake__points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;}
  .intake__points li{display:flex;gap:14px;font-family:var(--font-sans);font-size:var(--text-cap);line-height:1.5;color:var(--navy-100);}
  .intake__points svg{flex:none;margin-top:2px;color:var(--clay-400);}
  .intake__who{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:26px;border-top:1px solid var(--border-on-ink);}
  .intake__avatars{display:flex;}
  .intake__avatars img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--navy-900);}
  .intake__avatars img:last-child{margin-left:-14px;}
  .intake__who p{font-family:var(--font-sans);font-size:var(--text-sm);line-height:1.45;color:var(--navy-200);margin:0;}
  .intake__who b{color:#fff;}
  .intake__form{padding:var(--section-y) clamp(2rem,4vw,4.5rem);display:flex;flex-direction:column;}
  .intake__formwrap{max-width:560px;width:100%;margin:0 auto;display:flex;flex-direction:column;flex:1;}
  /* progress */
  .prog{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
  .prog__seg{height:4px;flex:1;border-radius:2px;background:var(--greige-300);overflow:hidden;}
  .prog__seg i{display:block;height:100%;width:0;background:var(--clay-500);transition:width var(--dur-slow) var(--ease-out);}
  .prog__seg.is-on i{width:100%;}
  .prog__label{font-family:var(--font-eyebrow);font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--text-faint);margin-bottom:26px;}
  .step__title{font-family:var(--font-heading);font-weight:400;font-size:var(--text-2xl);line-height:1.1;
    letter-spacing:var(--tracking-snug);color:var(--text-strong);margin:0 0 8px;}
  .step__sub{font-family:var(--font-sans);font-size:var(--text-cap);color:var(--text-muted);margin:0 0 28px;line-height:1.5;}
  /* service options */
  .svc-list{display:flex;flex-direction:column;gap:12px;}
  .svc-opt{display:flex;align-items:flex-start;gap:16px;text-align:left;width:100%;cursor:pointer;
    background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);
    padding:20px 22px;font-family:inherit;transition:border-color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast);}
  .svc-opt:hover{border-color:var(--navy-400);}
  .svc-opt.is-sel{border-color:var(--clay-500);background:var(--clay-50);box-shadow:var(--shadow-focus);}
  .svc-opt__mark{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border-strong);
    display:flex;align-items:center;justify-content:center;margin-top:2px;transition:all var(--dur-fast);}
  .svc-opt.is-sel .svc-opt__mark{border-color:var(--clay-500);background:var(--clay-500);color:#fff;}
  .svc-opt__t{font-family:var(--font-heading);font-size:var(--text-lg);color:var(--text-strong);margin:0 0 4px;line-height:1.2;}
  .svc-opt__d{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-muted);margin:0;line-height:1.5;}
  /* segmented */
  .seg{display:flex;gap:8px;flex-wrap:wrap;}
  .seg button{flex:1;min-width:110px;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600;
    padding:12px 14px;border-radius:var(--radius-xs);border:1.5px solid var(--border-strong);background:var(--surface);
    color:var(--navy-800);cursor:pointer;transition:all var(--dur-fast);}
  .seg button:hover{border-color:var(--navy-400);}
  .seg button.is-sel{border-color:var(--navy-700);background:var(--navy-700);color:var(--paper);}
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  .fspan{grid-column:1 / -1;}
  .step__nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:36px;
    padding-top:24px;border-top:1px solid var(--border-hairline);}
  .btn-back{font-family:var(--font-sans);font-size:var(--text-cap);font-weight:600;color:var(--text-muted);
    background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:8px 2px;transition:color var(--dur-fast);}
  .btn-back:hover{color:var(--navy-800);}
  .btn-back:disabled{opacity:0;pointer-events:none;}
  /* done */
  .done{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding:20px 0;flex:1;justify-content:center;}
  .done__badge{width:64px;height:64px;border-radius:50%;background:var(--clay-50);color:var(--clay-600);
    display:flex;align-items:center;justify-content:center;}
  .done h2{font-family:var(--font-display);font-weight:700;font-size:var(--text-3xl);line-height:1.02;
    letter-spacing:-0.02em;color:var(--text-strong);margin:0;}
  .done p{font-family:var(--font-sans);font-size:var(--text-md);line-height:1.6;color:var(--text-muted);margin:0;max-width:46ch;}
  @media (max-width:900px){ .intake{grid-template-columns:1fr;} .intake__rail{min-height:0;} .fgrid{grid-template-columns:1fr;} }
  `;
  document.head.appendChild(st);
}

const SERVICES = [
  { id: 'brokerage', t: 'Real Estate Brokerage', d: 'Find, lease, buy or sell space — tenant and landlord representation.' },
  { id: 'ownersrep', t: "Owner's Representation", d: 'Deliver a capital project — planning, design, construction and closeout.' },
  { id: 'funding', t: 'Public Funding Support', d: 'Pursue NYSCA, DCLA or city-agency capital funding for your project.' },
  { id: 'unsure', t: "I'm not sure yet", d: "Tell us the goal and we'll help you find the right path." },
];
const ORG_TYPES = ['Arts & cultural institution', 'Performing arts organization', 'Nonprofit or foundation', 'Educational institution', 'Faith-based organization', 'Healthcare or community org', 'Mission-driven developer', 'Other'];
const STAGES = ['Just exploring', 'Actively planning', 'Ready to start'];
const TIMELINES = ['Within 3 months', '3–6 months', '6–12 months', 'Not sure yet'];

function Check() { return <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>; }
function BackArrow() { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="19" y1="12" x2="5" y2="12" /><polyline points="12 19 5 12 12 5" /></svg>; }

function Contact() {
  const [step, setStep] = React.useState(1);
  const [d, setD] = React.useState({ service: '', org: '', orgType: '', stage: '', timeline: '', details: '', name: '', email: '', phone: '' });
  const set = (k, v) => setD((s) => ({ ...s, [k]: v }));
  React.useEffect(() => { window.scrollTo(0, 0); }, [step]);

  const canNext = step === 1 ? !!d.service : step === 2 ? !!d.stage : (!!d.name && !!d.email);

  return (
    <React.Fragment>
      <SiteHeader variant="solid" logo={'../../assets/logos/acona-logo.png'} logoWhite={'../../assets/logos/acona-logo-white.png'} links={NAV} active="#/contact" cta={{ label: 'Start a project', href: '#/contact' }} />

      <div className="intake">
        <div className="intake__rail">
          <div>
            <Eyebrow tone="on-dark" rule>Start a project</Eyebrow>
            <h1>Let's find the right path for your project.</h1>
          </div>
          <p className="intake__lead">A few quick questions so we can point you to the right person and come prepared. No obligation — just the start of a conversation.</p>
          <ul className="intake__points">
            <li><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg> Senior-led — Matt and Toby personally review every inquiry.</li>
            <li><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg> A conversation, not a questionnaire — share as much or as little as you like.</li>
            <li><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg> We respond within two business days.</li>
          </ul>
          <div className="intake__who">
            <span className="intake__avatars"><img src={'../../assets/photography/headshot-a.jpg'} alt="Matt Hopkins" /><img src={'../../assets/photography/headshot-b.jpg'} alt="Toby Rappaport" /></span>
            <p>Prefer email? <b>hello@aconarea.com</b><br />Brooklyn, New York</p>
          </div>
        </div>

        <div className="intake__form">
          <div className="intake__formwrap">
            {step === 'done' ? (
              <div className="done">
                <span className="done__badge"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
                <h2>Thanks{d.name ? ', ' + d.name.split(' ')[0] : ''} — we're on it.</h2>
                <p>Your note is headed straight to Matt and Toby. Expect a personal reply within two business days. In the meantime, feel free to explore the work we're proudest of.</p>
                <div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap' }}>
                  <Button variant="primary" arrow href="#/gallery">Explore the gallery</Button>
                  <Button variant="ghost" arrow href="#top" onClick={() => setStep(1)}>Back to start</Button>
                </div>
              </div>
            ) : (
              <React.Fragment>
                <div className="prog">
                  {[1, 2, 3].map((n) => <span key={n} className={'prog__seg' + (step >= n ? ' is-on' : '')}><i /></span>)}
                </div>
                <div className="prog__label">Step {step} of 3 · {step === 1 ? 'What you need' : step === 2 ? 'Your project' : 'Your details'}</div>

                {step === 1 && (
                  <div>
                    <h2 className="step__title">What brings you to ACONA?</h2>
                    <p className="step__sub">Pick the closest fit — you can tell us more in a moment.</p>
                    <div className="svc-list">
                      {SERVICES.map((s) => (
                        <button key={s.id} className={'svc-opt' + (d.service === s.id ? ' is-sel' : '')} onClick={() => set('service', s.id)}>
                          <span className="svc-opt__mark">{d.service === s.id && <Check />}</span>
                          <span><span className="svc-opt__t" style={{ display: 'block' }}>{s.t}</span><span className="svc-opt__d">{s.d}</span></span>
                        </button>
                      ))}
                    </div>
                  </div>
                )}

                {step === 2 && (
                  <div>
                    <h2 className="step__title">Tell us about your project.</h2>
                    <p className="step__sub">Enough to point you to the right person — details can come later.</p>
                    <div className="fgrid">
                      <Field className="fspan" label="Organization" htmlFor="org">
                        <Input id="org" value={d.org} onChange={(e) => set('org', e.target.value)} placeholder="Brooklyn Arts Exchange" />
                      </Field>
                      <Field className="fspan" label="Type of organization" htmlFor="ot">
                        <Select id="ot" value={d.orgType} onChange={(e) => set('orgType', e.target.value)}>
                          <option value="">Select…</option>
                          {ORG_TYPES.map((o) => <option key={o}>{o}</option>)}
                        </Select>
                      </Field>
                      <div className="fspan">
                        <Field label="Where are you in the process?" htmlFor="stg"><span /></Field>
                        <div className="seg" style={{ marginTop: '-2px' }}>
                          {STAGES.map((s) => <button key={s} className={d.stage === s ? 'is-sel' : ''} onClick={() => set('stage', s)}>{s}</button>)}
                        </div>
                      </div>
                      <Field className="fspan" label="Ideal timeline" htmlFor="tl">
                        <Select id="tl" value={d.timeline} onChange={(e) => set('timeline', e.target.value)}>
                          <option value="">Select…</option>
                          {TIMELINES.map((o) => <option key={o}>{o}</option>)}
                        </Select>
                      </Field>
                      <Field className="fspan" label="Anything you'd like us to know?" htmlFor="dt" hint="Optional — a sentence or two is plenty.">
                        <Textarea id="dt" rows={4} value={d.details} onChange={(e) => set('details', e.target.value)} placeholder="We're planning a renovation and need help with funding and construction…" />
                      </Field>
                    </div>
                  </div>
                )}

                {step === 3 && (
                  <div>
                    <h2 className="step__title">How can we reach you?</h2>
                    <p className="step__sub">We'll only use this to reply to your inquiry.</p>
                    <div className="fgrid">
                      <Field className="fspan" label="Full name" htmlFor="nm" required>
                        <Input id="nm" value={d.name} onChange={(e) => set('name', e.target.value)} placeholder="Jane Rivera" />
                      </Field>
                      <Field label="Email" htmlFor="em" required>
                        <Input id="em" type="email" value={d.email} onChange={(e) => set('email', e.target.value)} placeholder="jane@org.org" />
                      </Field>
                      <Field label="Phone" htmlFor="ph" hint="Optional">
                        <Input id="ph" type="tel" value={d.phone} onChange={(e) => set('phone', e.target.value)} placeholder="(347) 000-0000" />
                      </Field>
                    </div>
                  </div>
                )}

                <div className="step__nav">
                  <button className="btn-back" onClick={() => setStep((s) => s - 1)} disabled={step === 1}><BackArrow /> Back</button>
                  {step < 3
                    ? <Button variant="primary" arrow disabled={!canNext} onClick={() => setStep((s) => s + 1)}>Continue</Button>
                    : <Button variant="primary" arrow disabled={!canNext} onClick={() => setStep('done')}>Send to Matt &amp; Toby</Button>}
                </div>
              </React.Fragment>
            )}
          </div>
        </div>
      </div>

      <SiteFooter logoWhite={'../../assets/logos/acona-logo-white.png'} />
    </React.Fragment>
  );
}

window.ACONA = window.ACONA || {};
window.ACONA.Contact = Contact;