/* ============================================================
   Digital Odyssey, Contact page (primary conversion)
   ============================================================ */

const SERVICE_CHIPS = ['Social Media', 'Paid Ads', 'SEO', 'Content', 'Web Design', 'Analytics'];
const BUDGETS = ['Under $5k / mo', '$5k – $15k / mo', '$15k – $50k / mo', '$50k+ / mo'];

function Field({ label, required, error, children }) {
  return (
    <label style={{ display: 'block' }}>
      <span style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8, fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 13.5, color: 'var(--text)' }}>
        <span>{label}{required && <span style={{ color: 'var(--cyan-deep)' }}> *</span>}</span>
        {error && <span style={{ color: 'var(--down)', fontWeight: 500, fontSize: 12.5 }}>{error}</span>}
      </span>
      {children}
    </label>);

}

const inputBase = {
  width: '100%', height: 50, borderRadius: 'var(--radius-md)', border: '1.5px solid var(--border)',
  background: 'var(--surface-inset)', color: 'var(--text)', padding: '0 16px',
  fontFamily: 'var(--font-sans)', fontSize: 15, outline: 'none', transition: 'border-color .15s ease'
};

function ContactForm({ submitLabel = 'Send & start the conversation' }) {
  const [f, setF] = React.useState({ name: '', email: '', company: '', website: '', budget: '', message: '' });
  const [picked, setPicked] = React.useState([]);
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const set = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  const toggle = (s) => setPicked((p) => p.includes(s) ? p.filter((x) => x !== s) : [...p, s]);

  const submit = (e) => {
    e.preventDefault();
    const err = {};
    if (!f.name.trim()) err.name = 'Required';
    if (!f.email.includes('@') || !f.email.includes('.')) err.email = 'Enter a valid email';
    if (!f.message.trim()) err.message = 'Tell us a little';
    setErrors(err);
    if (Object.keys(err).length === 0) {
      setSent(true);
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  };

  if (sent) {
    return (
      <div className="do-card" style={{ padding: 'clamp(32px,5vw,56px)', textAlign: 'center' }}>
        <div style={{ width: 72, height: 72, borderRadius: 9999, background: 'var(--grad-energy)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px', boxShadow: '0 0 40px rgba(26,224,230,.4)' }}>
          <Icon name="check" size={34} color="#04122b" stroke={2.5} />
        </div>
        <h3 className="do-display-sm" style={{ margin: '0 0 12px' }}>Thanks, {f.name.split(' ')[0] || 'there'}, message received.</h3>
        <p className="do-body-lg" style={{ margin: '0 auto 28px', maxWidth: 420 }}>A strategist will reach out within one business day with first thoughts on your growth. No bots, no call center.</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Button variant="cyan" icon="calendar" onClick={() => document.getElementById('booking')?.scrollIntoView({ behavior: 'smooth' })}>Book a time now</Button>
          <Button variant="outline" onClick={() => {setSent(false);setF({ name: '', email: '', company: '', website: '', budget: '', message: '' });setPicked([]);}}>Send another</Button>
        </div>
      </div>);

  }

  return (
    <form className="do-card contact-form-wrap" onSubmit={submit} noValidate style={{ padding: 'clamp(24px,4vw,40px)', display: 'flex', flexDirection: 'column', gap: 20, width: '100%', boxSizing: 'border-box' }}>
      <div className="grid-2 contact-form-row" style={{ gap: 18 }}>
        <Field label="Full name" required error={errors.name}>
          <input value={f.name} onChange={set('name')} placeholder="Jane Doe" style={inputBase}
          onFocus={(e) => e.target.style.borderColor = 'var(--primary)'} onBlur={(e) => e.target.style.borderColor = 'var(--border)'} />
        </Field>
        <Field label="Work email" required error={errors.email}>
          <input value={f.email} onChange={set('email')} type="email" placeholder="jane@company.com" style={inputBase}
          onFocus={(e) => e.target.style.borderColor = 'var(--primary)'} onBlur={(e) => e.target.style.borderColor = 'var(--border)'} />
        </Field>
      </div>
      <div className="grid-2 contact-form-row" style={{ gap: 18 }}>
        <Field label="Company">
          <input value={f.company} onChange={set('company')} placeholder="Company Inc." style={inputBase}
          onFocus={(e) => e.target.style.borderColor = 'var(--primary)'} onBlur={(e) => e.target.style.borderColor = 'var(--border)'} />
        </Field>
        <Field label="Website">
          <input value={f.website} onChange={set('website')} placeholder="company.com" style={inputBase}
          onFocus={(e) => e.target.style.borderColor = 'var(--primary)'} onBlur={(e) => e.target.style.borderColor = 'var(--border)'} />
        </Field>
      </div>

      <Field label="What can we help with?">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 9, marginTop: 2 }}>
          {SERVICE_CHIPS.map((s) => {
            const on = picked.includes(s);
            return (
              <button type="button" key={s} onClick={() => toggle(s)}
              style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 13.5, padding: '9px 16px', borderRadius: 'var(--radius-pill)', cursor: 'pointer',
                border: '1.5px solid', borderColor: on ? 'transparent' : 'var(--border)',
                background: on ? 'var(--grad-energy)' : 'transparent', color: on ? '#04122b' : 'var(--text-2)', transition: 'all .15s ease' }}>
                {s}
              </button>);

          })}
        </div>
      </Field>

      <Field label="Monthly budget">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 9 }}>
          {BUDGETS.map((b) => {
            const on = f.budget === b;
            return (
              <button type="button" key={b} onClick={() => setF((s) => ({ ...s, budget: b }))}
              style={{ fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 13.5, padding: '9px 16px', borderRadius: 'var(--radius-pill)', cursor: 'pointer',
                border: '1.5px solid', borderColor: on ? 'var(--cyan-deep)' : 'var(--border)',
                background: on ? 'color-mix(in srgb, var(--cyan) 14%, transparent)' : 'transparent', color: on ? 'var(--text)' : 'var(--text-2)', transition: 'all .15s ease' }}>
                {b}
              </button>);

          })}
        </div>
      </Field>

      <Field label="Tell us about your goals" required error={errors.message}>
        <textarea value={f.message} onChange={set('message')} rows={4} placeholder="Where are you trying to go, and what's in the way?"
        style={{ ...inputBase, height: 'auto', padding: '14px 16px', resize: 'vertical', lineHeight: 1.5 }}
        onFocus={(e) => e.target.style.borderColor = 'var(--primary)'} onBlur={(e) => e.target.style.borderColor = 'var(--border)'} />
      </Field>

      <Button size="lg" variant="cyan" icon="arrow-right" full>{submitLabel}</Button>
      <p className="do-caption" style={{ textAlign: 'center', margin: 0 }}>We reply within one business day. Your details stay private.</p>
    </form>);

}

function MiniMap() {
  return (
    <div className="mini-map-wrap" style={{ position: 'relative', height: 220, borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--border)', background: 'var(--navy-soft)', width: '100%', boxSizing: 'border-box' }}>
      <svg viewBox="0 0 400 220" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ display: 'block' }}>
        <rect width="400" height="220" fill="#0a1024" />
        {[40, 90, 140, 190].map((y) => <line key={'h' + y} x1="0" y1={y} x2="400" y2={y} stroke="rgba(255,255,255,.05)" strokeWidth="1" />)}
        {[60, 140, 220, 300, 360].map((x) => <line key={'v' + x} x1={x} y1="0" x2={x} y2="220" stroke="rgba(255,255,255,.05)" strokeWidth="1" />)}
        <path d="M0 150 L140 150 L140 40 L300 40" fill="none" stroke="rgba(26,224,230,.35)" strokeWidth="3" />
        <path d="M60 220 L60 90 L360 90" fill="none" stroke="rgba(47,107,255,.3)" strokeWidth="3" />
        <circle cx="140" cy="90" r="40" fill="rgba(26,224,230,.08)" />
      </svg>
      <div style={{ position: 'absolute', top: '40%', left: '35%' }}>
        <div style={{ width: 18, height: 18, borderRadius: 9999, background: 'var(--cyan)', boxShadow: '0 0 0 6px rgba(26,224,230,.25), 0 0 20px var(--cyan)', animation: 'do-pulse 2s ease-in-out infinite' }}></div>
      </div>
      <div style={{ position: 'absolute', bottom: 14, left: 14, background: 'rgba(6,10,24,.7)', backdropFilter: 'blur(6px)', borderRadius: 10, padding: '8px 12px', display: 'flex', alignItems: 'center', gap: 8 }}>
        <Icon name="map-pin" size={15} color="var(--cyan)" />
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12.5, color: '#fff' }}>Digital Odyssey HQ · Edmonton, CA</span>
      </div>
    </div>);

}

function ContactInfo() {
  const items = [
  ['mail', 'Email us', 'hello@digitalodyssey.agency', 'mailto:hello@digitalodyssey.agency'],
  ['phone', 'Call us', '+1 905-924-4535', 'tel:+19059244535'],
  ['clock', 'Hours', 'Mon–Fri · 9am–6pm MDT/MST', null]];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {items.map(([icon, label, val, href]) =>
      <div key={label} style={{ display: 'flex', gap: 16, alignItems: 'center', padding: '16px 0', borderBottom: '1px solid var(--border)' }}>
          <div style={{ width: 46, height: 46, borderRadius: 12, background: 'var(--chip-bg)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <Icon name={icon} size={20} color="var(--cyan-deep)" />
          </div>
          <div>
            <div className="do-caption" style={{ marginBottom: 2 }}>{label}</div>
            {href ? <a href={href} className="do-title-sm" style={{ color: 'var(--text)' }}>{val}</a> : <div className="do-title-sm">{val}</div>}
          </div>
        </div>
      )}
    </div>);

}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#1ae0e6", "#00b3bd"],
  "logoScale": 1,
  "heroTitle": "Tell us where you want to go.",
  "heroSubtitle": "Fill out the form and a strategist, a real one, will come back within a business day with first thoughts on your growth. No pitch decks required.",
  "submitLabel": "Send & start the conversation",
  "showBooking": true,
  "showMap": true
}/*EDITMODE-END*/;

const ACCENT_OPTS = [
  ["#1ae0e6", "#00b3bd"],
  ["#22d3a8", "#0f9b78"],
  ["#7c5cff", "#5b3fd6"],
  ["#ff7a59", "#e0552f"],
];

function ContactApp() {
  useReveal();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    const [c1, c2] = t.accent;
    root.style.setProperty('--cyan', c1);
    root.style.setProperty('--cyan-deep', c2);
    root.style.setProperty('--grad-energy', `linear-gradient(115deg, var(--primary) 0%, ${c1} 100%)`);
    root.style.setProperty('--logo-scale', String(t.logoScale));
    return () => { root.style.removeProperty('--logo-scale'); };
  }, [t.accent, t.logoScale]);

  return (
    <>
      <TopNav active="contact" />
      <main>
        <PageHero eyebrow="Let's talk growth" title={t.heroTitle}
        body={t.heroSubtitle} align="center" />

        <section className="section">
          <Container>
            <div className="split contact-split" style={{ gridTemplateColumns: '1.15fr .85fr', alignItems: 'flex-start' }}>
              <div className="reveal"><ContactForm submitLabel={t.submitLabel} /></div>
              <div className="reveal" style={{ transitionDelay: '100ms', display: 'flex', flexDirection: 'column', gap: 32 }}>
                <div>
                  <h3 className="do-title-lg" style={{ margin: '0 0 6px' }}>Prefer to reach us directly?</h3>
                  <p className="do-body-md" style={{ margin: '0 0 8px' }}>However you like to start, we are easy to find.</p>
                  <ContactInfo />
                </div>
                {t.showBooking &&
                <div id="booking" className="do-card" style={{ padding: 28, textAlign: 'center' }}>
                  <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}><LaunchMark size={56} /></div>
                  <h3 className="do-title-md" style={{ margin: '0 0 8px' }}>Rather just book a call?</h3>
                  <p className="do-body-sm" style={{ margin: '0 0 20px' }}>Grab a 30-minute discovery slot that suits you.</p>
                  <Button variant="primary" icon="calendar" full onClick={() => alert('This would open your scheduling tool (e.g. Calendly).')}>Schedule a discovery call</Button>
                </div>}
                {t.showMap && <MiniMap />}
              </div>
            </div>
          </Container>
        </section>

        <section className="section" style={{ background: 'var(--page-soft)' }}>
          <Container style={{ maxWidth: 840 }}>
            <SectionHead eyebrow="Before you ask" title="Quick answers." align="center" />
            <FaqAccordion items={FAQS.slice(0, 4)} />
          </Container>
        </section>
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={t.accent} options={ACCENT_OPTS} onChange={(v) => setTweak('accent', v)} />
        <TweakSlider label="Logo size" value={t.logoScale} min={0.8} max={1.6} step={0.05} unit="×" onChange={(v) => setTweak('logoScale', v)} />
        <TweakSection label="Hero copy" />
        <TweakText label="Headline" value={t.heroTitle} onChange={(v) => setTweak('heroTitle', v)} />
        <TweakText label="Subtitle" value={t.heroSubtitle} onChange={(v) => setTweak('heroSubtitle', v)} />
        <TweakText label="Button label" value={t.submitLabel} onChange={(v) => setTweak('submitLabel', v)} />
        <TweakSection label="Layout" />
        <TweakToggle label="Show booking card" value={t.showBooking} onChange={(v) => setTweak('showBooking', v)} />
        <TweakToggle label="Show map" value={t.showMap} onChange={(v) => setTweak('showMap', v)} />
      </TweaksPanel>
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<ContactApp />);