const { useState: _useState5, useEffect: _useEffect5 } = React;

// ─── 13. QUOTE FORM ───────────────────────────────────────────────────────
function QuoteForm() {
  const [ref, inView] = useInView(0.08);
  const [submitted, setSubmitted] = _useState5(false);
  const [loading, setLoading] = _useState5(false);
  const [error, setError] = _useState5('');
  const BLANK = { businessName: '', businessType: '', need: 'Both', logo: 'Yes', link: '', name: '', contact: '', preferredContact: 'Email' };
  const [data, setData] = _useState5(BLANK);

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

  const handleSubmit = async e => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({
          access_key: '5a49bce6-968b-4e5d-ba63-d3b56c670b4b',
          subject: 'New Quote Request — DreamCode Studio',
          botcheck: '',
          'Business Name': data.businessName,
          'Business Type': data.businessType,
          'What They Need': data.need,
          'Has Logo': data.logo,
          'Social / Website Link': data.link || '—',
          'Name': data.name,
          'Phone or Email': data.contact,
          'Preferred Contact': data.preferredContact,
        }),
      });
      const json = await res.json();
      if (json.success) {
        setSubmitted(true);
        setData(BLANK);
      } else {
        setError(json.message || 'Something went wrong. Please try again.');
      }
    } catch {
      setError('Network error — please check your connection and try again.');
    } finally {
      setLoading(false);
    }
  };

  const fieldStyle = {
    width: '100%', padding: '12px 14px', borderRadius: 10,
    border: '1px solid rgba(42,14,26,0.14)', background: 'rgba(255,255,255,0.7)',
    fontFamily: 'DM Sans, sans-serif', fontSize: 15, color: '#2A0E1A',
    outline: 'none', transition: 'border-color 0.2s, box-shadow 0.2s',
  };
  const labelStyle = { fontFamily: 'DM Sans, sans-serif', fontSize: 13, fontWeight: 600, color: 'rgba(42,14,26,0.7)', marginBottom: 6, display: 'block' };

  const Radio = ({ name, options, value, onChange }) => (
    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
      {options.map(o => (
        <button type="button" key={o} onClick={() => onChange(o)} style={{
          padding: '9px 16px', borderRadius: 100,
          border: `1px solid ${value === o ? 'rgba(214,4,87,0.5)' : 'rgba(42,14,26,0.14)'}`,
          background: value === o ? 'rgba(214,4,87,0.1)' : 'rgba(255,255,255,0.6)',
          color: value === o ? '#6E0240' : 'rgba(42,14,26,0.7)',
          fontFamily: 'DM Sans, sans-serif', fontSize: 13.5, fontWeight: value === o ? 600 : 500,
          cursor: 'pointer', transition: 'all 0.2s',
        }}>{o}</button>
      ))}
    </div>
  );

  return (
    <section id="quote-form" style={{ padding: '120px 48px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 680, height: 480, background: 'radial-gradient(ellipse,rgba(214,4,87,0.13) 0%,rgba(246,46,51,0.05) 40%,transparent 70%)', borderRadius: '50%', pointerEvents: 'none' }}></div>
      <div ref={ref} style={{ maxWidth: 720, margin: '0 auto', position: 'relative', zIndex: 1, opacity: inView?1:0, transform: inView?'translateY(0)':'translateY(22px)', transition: 'opacity 0.7s, transform 0.7s' }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <div style={{ marginBottom: 12 }}><span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(42,14,26,0.4)' }}>Get Started</span></div>
          <h2 style={{ fontFamily: 'Fraunces, serif', fontSize: 'clamp(30px,3.4vw,48px)', fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em', color: '#2A0E1A', marginBottom: 14 }}>Tell us about your business.</h2>
          <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, color: 'rgba(42,14,26,0.55)', lineHeight: 1.6 }}>Takes about 5 minutes. We'll reply within 24 hours.</p>
        </div>

        {submitted ? (
          <div className="glass" style={{ borderRadius: 20, padding: 48, textAlign: 'center', border: '1px solid rgba(214,4,87,0.28)', boxShadow: '0 0 30px rgba(214,4,87,0.12)' }}>
            <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'linear-gradient(135deg,#F62E33,#D60457)', margin: '0 auto 20px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3"><path d="M20 6L9 17l-5-5"/></svg>
            </div>
            <h3 style={{ fontFamily: 'Fraunces, serif', fontSize: 26, fontWeight: 700, color: '#2A0E1A', marginBottom: 10 }}>Thanks — got it.</h3>
            <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, color: 'rgba(42,14,26,0.6)', lineHeight: 1.6, marginBottom: 18 }}>
              We'll review your details and reply within 24 hours with a quote and next steps.
            </p>
            <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, color: 'rgba(42,14,26,0.42)', fontStyle: 'italic' }}>
              In the meantime, feel free to keep browsing — or check your email for our reply.
            </p>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="glass" style={{ borderRadius: 20, padding: '32px 32px 28px', display: 'flex', flexDirection: 'column', gap: 20 }}>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }} className="ps-grid">
              <div>
                <label style={labelStyle}>Business Name</label>
                <input type="text" required value={data.businessName} onChange={e => set('businessName', e.target.value)} style={fieldStyle} placeholder="e.g. Maria's Tax Office" />
              </div>
              <div>
                <label style={labelStyle}>Type of Business</label>
                <input type="text" required value={data.businessType} onChange={e => set('businessType', e.target.value)} style={fieldStyle} placeholder="e.g. Hair salon, contractor" />
              </div>
            </div>

            <div>
              <label style={labelStyle}>What do you need?</label>
              <Radio options={['Social media', 'Website', 'Both']} value={data.need} onChange={v => set('need', v)} />
            </div>

            <div>
              <label style={labelStyle}>Do you have a logo?</label>
              <select value={data.logo} onChange={e => set('logo', e.target.value)} style={{ ...fieldStyle, appearance: 'none', backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path fill='rgba(42,14,26,.5)' d='M0 0h10L5 6z'/></svg>\")", backgroundRepeat: 'no-repeat', backgroundPosition: 'right 14px center', paddingRight: 36 }}>
                <option>Yes</option>
                <option>No</option>
                <option>Sort of</option>
              </select>
            </div>

            <div>
              <label style={labelStyle}>Instagram / Facebook / Website link <span style={{ color: 'rgba(42,14,26,0.4)', fontWeight: 400 }}>(optional)</span></label>
              <input type="text" value={data.link} onChange={e => set('link', e.target.value)} style={fieldStyle} placeholder="https://instagram.com/yourbusiness" />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }} className="ps-grid">
              <div>
                <label style={labelStyle}>Your Name</label>
                <input type="text" required value={data.name} onChange={e => set('name', e.target.value)} style={fieldStyle} placeholder="Your full name" />
              </div>
              <div>
                <label style={labelStyle}>Phone or Email</label>
                <input type="text" required value={data.contact} onChange={e => set('contact', e.target.value)} style={fieldStyle} placeholder="you@example.com or (555) 123-4567" />
              </div>
            </div>

            <div>
              <label style={labelStyle}>Preferred contact method</label>
              <Radio options={['Email', 'Phone', 'Either']} value={data.preferredContact} onChange={v => set('preferredContact', v)} />
            </div>

            {error && (
              <div style={{ padding: '12px 16px', borderRadius: 10, background: 'rgba(200,60,60,0.08)', border: '1px solid rgba(200,60,60,0.25)', fontFamily: 'DM Sans, sans-serif', fontSize: 14, color: '#c83c3c' }}>
                {error}
              </div>
            )}
            <button type="submit" disabled={loading} className="btn-primary" style={{ width: '100%', justifyContent: 'center', padding: '15px 28px', fontSize: 15, marginTop: 8, opacity: loading ? 0.7 : 1, cursor: loading ? 'not-allowed' : 'pointer' }}>
              {loading ? 'Sending…' : 'Send my quote request'}
              {!loading && <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>}
            </button>
          </form>
        )}
      </div>
    </section>
  );
}

// ─── NEW NAV ──────────────────────────────────────────────────────────────
function NewNav() {
  const [scrolled, setScrolled] = _useState5(false);
  const [menuOpen, setMenuOpen] = _useState5(false);
  _useEffect5(() => {
    const fn = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);

  const links = [
    { label: 'Services', href: '#services' },
    { label: 'Work Samples', href: '#sample-work' },
    { label: 'Packages', href: '#packages' },
    { label: 'FAQ', href: '#faq' },
  ];

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      padding: '0 40px', height: 64,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: scrolled ? 'rgba(255,248,240,0.88)' : 'transparent',
      backdropFilter: scrolled ? 'blur(20px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(20px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(42,14,26,0.07)' : '1px solid transparent',
      transition: 'background 0.3s, border-color 0.3s',
    }}>
      <a href="#" className="brand-wrap" style={{ textDecoration: 'none' }}>
        <span style={{ fontFamily: 'Fraunces, serif', fontSize: 22, fontWeight: 700, background: 'linear-gradient(95deg, #F62E33 0%, #D60457 50%, #6E0240 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>DreamCode</span>
      </a>
      <div className="desktop-nav" style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
        {links.map(l => (
          <a key={l.label} href={l.href} style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, fontWeight: 500, color: 'rgba(42,14,26,0.6)', textDecoration: 'none', transition: 'color 0.2s' }}
            onMouseEnter={e => e.target.style.color = '#2A0E1A'} onMouseLeave={e => e.target.style.color = 'rgba(42,14,26,0.6)'}>{l.label}</a>
        ))}
        <a href="#quote-form" className="btn-primary" style={{ padding: '9px 20px', fontSize: 14 }}>Get a quote</a>
      </div>
      <button onClick={() => setMenuOpen(!menuOpen)} className="mobile-menu-btn" style={{ display: 'none', background: 'none', border: 'none', cursor: 'pointer', color: '#2A0E1A', padding: 8 }} aria-label="Menu">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">{menuOpen ? <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></> : <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></>}</svg>
      </button>
      {menuOpen && (
        <div style={{ position: 'absolute', top: 64, left: 0, right: 0, background: 'rgba(255,248,240,0.97)', backdropFilter: 'blur(20px)', borderBottom: '1px solid rgba(42,14,26,0.08)', padding: '16px 40px 28px', display: 'flex', flexDirection: 'column', gap: 18 }}>
          {links.map(l => (
            <a key={l.label} href={l.href} onClick={() => setMenuOpen(false)} style={{ color: '#2A0E1A', textDecoration: 'none', fontSize: 17, fontWeight: 500 }}>{l.label}</a>
          ))}
          <a href="#quote-form" className="btn-primary" onClick={() => setMenuOpen(false)} style={{ alignSelf: 'flex-start' }}>Get a free quote</a>
        </div>
      )}
    </nav>
  );
}

// ─── NEW FOOTER ───────────────────────────────────────────────────────────
function NewFooter() {
  const links = [
    { label: 'Services', href: '#services' },
    { label: 'Work Samples', href: '#sample-work' },
    { label: 'Packages', href: '#packages' },
    { label: 'FAQ', href: '#faq' },
    { label: 'Get a quote', href: '#quote-form' },
  ];
  return (
    <footer style={{ borderTop: '1px solid rgba(42,14,26,0.07)', padding: '56px 48px 32px', background: 'rgba(255,250,242,0.55)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 40, marginBottom: 40 }} className="ps-grid">
          <div>
            <div style={{ fontFamily: 'Fraunces, serif', fontSize: 26, fontWeight: 700, background: 'linear-gradient(95deg, #F62E33 0%, #D60457 50%, #6E0240 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text', marginBottom: 8 }}>DreamCode</div>
            <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 15, color: 'rgba(42,14,26,0.55)', lineHeight: 1.55, maxWidth: 320 }}>Websites and branded social media for small businesses. Locally-based, bilingual, no monthly traps.</div>
          </div>
          <div>
            <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(42,14,26,0.4)', marginBottom: 14 }}>Contact</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <a href="mailto:hello@dreamcode.studio" style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, color: 'rgba(42,14,26,0.7)', textDecoration: 'none' }}>hello@dreamcode.studio</a>
              <a href="https://instagram.com/dreamcode.studio" style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, color: 'rgba(42,14,26,0.7)', textDecoration: 'none' }}>Instagram</a>
              <a href="https://facebook.com/dreamcode.studio" style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, color: 'rgba(42,14,26,0.7)', textDecoration: 'none' }}>Facebook</a>
            </div>
          </div>
          <div>
            <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(42,14,26,0.4)', marginBottom: 14 }}>Sitemap</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {links.map(l => (
                <a key={l.label} href={l.href} style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, color: 'rgba(42,14,26,0.7)', textDecoration: 'none' }}>{l.label}</a>
              ))}
            </div>
          </div>
        </div>
        <div style={{ paddingTop: 22, borderTop: '1px solid rgba(42,14,26,0.07)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
          <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 13, color: 'rgba(42,14,26,0.4)' }}>© 2026 DreamCode</span>
          <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 13, color: 'rgba(42,14,26,0.4)', fontStyle: 'italic' }}>Made with care.</span>
        </div>
      </div>
    </footer>
  );
}

window.QuoteForm = QuoteForm;
window.NewNav = NewNav;
window.NewFooter = NewFooter;