// Celebration cake enquiry form + About + Footer

function EnquiryForm() {
  const [fields, setFields] = React.useState({
    name: '', email: '', message: '', occasion: 'Birthday',
    date: '', serves: '6–10 people', photo: null,
  });

  const inputStyle = { width: '100%', padding: '11px 14px', border: '1.5px solid #E8D5C4', borderRadius: 10, background: '#FFFBF5', fontSize: 14, color: '#3D2817', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box' };
  const labelStyle = { display: 'block', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#8B6F4E', fontWeight: 500, marginBottom: 6 };

  function handleSubmit(e) {
    e.preventDefault();
    const subject = encodeURIComponent(`Celebration Cake Enquiry – ${fields.occasion}`);
    const body = encodeURIComponent(
      `Name: ${fields.name}\nDate needed: ${fields.date}\nServes: ${fields.serves}\nOccasion: ${fields.occasion}\n\n${fields.message}`
    );
    window.location.href = `mailto:epetitebakery@gmail.com?subject=${subject}&body=${body}`;
  }

  return (
    <form onSubmit={handleSubmit}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }} className="form-row-2">
        <div><label style={labelStyle}>Your name</label><input style={inputStyle} required value={fields.name} onChange={e => setFields(f => ({ ...f, name: e.target.value }))} placeholder="Jane Smith" /></div>
        <div><label style={labelStyle}>Email</label><input style={inputStyle} required type="email" value={fields.email} onChange={e => setFields(f => ({ ...f, email: e.target.value }))} placeholder="you@example.com" /></div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }} className="form-row-2">
        <div style={{ minWidth: 0 }}><label style={labelStyle}>Date needed</label><input style={{ ...inputStyle, minWidth: 0, appearance: 'none', WebkitAppearance: 'none' }} type="date" required value={fields.date} onChange={e => setFields(f => ({ ...f, date: e.target.value }))} /></div>
        <div>
          <label style={labelStyle}>Serves</label>
          <select style={{ ...inputStyle, appearance: 'none' }} value={fields.serves} onChange={e => setFields(f => ({ ...f, serves: e.target.value }))}>
            <option>6–10 people</option><option>10–20 people</option><option>20–40 people</option><option>40+ people</option>
          </select>
        </div>
      </div>

      <div style={{ marginBottom: 14 }}>
        <label style={labelStyle}>Occasion</label>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {['Birthday', 'Wedding', 'Baby Shower', 'Gender Reveal', 'Seasonal', 'Other'].map(o => (
            <label key={o} style={{ padding: '8px 14px', borderRadius: 9999, border: `1px solid ${fields.occasion === o ? '#C97B4A' : '#E8D5C4'}`, fontSize: 13, color: '#3D2817', cursor: 'pointer', background: fields.occasion === o ? '#FDF0E6' : '#FFFBF5', display: 'inline-flex', alignItems: 'center', gap: 6, transition: 'all .12s ease' }}>
              <input type="radio" name="occ" style={{ accentColor: '#C97B4A' }} checked={fields.occasion === o} onChange={() => setFields(f => ({ ...f, occasion: o }))} /> {o}
            </label>
          ))}
        </div>
      </div>

      <div style={{ marginBottom: 14 }}>
        <label style={labelStyle}>Dietary needs</label>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {['Gluten-Free', 'Dairy-Free', 'Nut-Free', 'Egg-Free', 'Vegan', 'Other'].map(d => (
            <label key={d} style={{ padding: '8px 14px', borderRadius: 9999, border: '1px solid #E8D5C4', fontSize: 13, color: '#3D2817', cursor: 'pointer', background: '#FFFBF5', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <input type="checkbox" style={{ accentColor: '#C97B4A' }} /> {d}
            </label>
          ))}
        </div>
      </div>

      <div style={{ marginBottom: 14 }}>
        <label style={labelStyle}>Tell me about your cake</label>
        <textarea rows={4} style={{ ...inputStyle, resize: 'vertical', fontFamily: 'inherit' }} value={fields.message} onChange={e => setFields(f => ({ ...f, message: e.target.value }))} placeholder="Flavours you love, colours, any design references…" />
      </div>

      <div style={{ marginBottom: 20 }}>
        <label style={labelStyle}>Reference photo <span style={{ fontSize: 11, color: '#B09070', fontWeight: 400, textTransform: 'none', letterSpacing: 0 }}>(optional)</span></label>
        <div style={{ position: 'relative' }}>
          <input
            type="file"
            accept="image/*"
            onChange={e => setFields(f => ({ ...f, photo: e.target.files[0] || null }))}
            style={{ position: 'absolute', inset: 0, opacity: 0, cursor: 'pointer', width: '100%', height: '100%', zIndex: 2 }}
          />
          <div style={{ padding: '12px 16px', border: '1.5px dashed #E8D5C4', borderRadius: 10, background: '#FFFBF5', display: 'flex', alignItems: 'center', gap: 10, color: fields.photo ? '#3D2817' : '#B09070', fontSize: 14 }}>
            <i data-lucide="image" style={{ width: 16, height: 16, flexShrink: 0 }}></i>
            <span>{fields.photo ? fields.photo.name : 'Upload a photo for inspiration — jpg, png, gif up to 10MB'}</span>
          </div>
        </div>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }} className="enquiry-btn-row">
        <button type="submit" style={{ padding: '13px 22px', background: '#C97B4A', color: '#FDF8F3', borderRadius: 12, fontSize: 15, fontWeight: 500, border: 'none', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
          Send enquiry <i data-lucide="send" style={{ width: 15, height: 15 }}></i>
        </button>
        <p style={{ fontSize: 12, color: '#8B6F4E', margin: 0, fontStyle: 'italic', fontFamily: "'Fraunces', serif", textAlign: 'right' }}>Usually I reply the same day — always within 24 hours.</p>
      </div>
    </form>
  );
}

function About() {
  return (
    <section style={{ padding: '72px 24px', background: '#F0E2D0' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }} className="about-grid">
        <div>
          <div style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.12em', color: '#C97B4A', fontWeight: 500, marginBottom: 12 }}>About Emilia</div>
          <h2 style={{ fontFamily: "'Fraunces', serif", fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em', margin: '0 0 16px', color: '#3D2817' }}>Baked slowly, <em style={{ fontStyle: 'italic', fontWeight: 400 }}>properly</em>.</h2>
          <p style={{ fontSize: 15, lineHeight: 1.65, color: '#8B6F4E', margin: '0 0 14px' }}>Baking is, without question, my love language.</p>
          <p style={{ fontSize: 15, lineHeight: 1.65, color: '#8B6F4E', margin: '0 0 14px' }}>It's what happens when a handful of simple ingredients become something so much more: a gesture, a way of saying 'I'm thinking of you', without having to find the words. That's what I want every bake to feel like for the person receiving it.</p>
          <p style={{ fontSize: 15, lineHeight: 1.65, color: '#8B6F4E', margin: 0 }}>I inherited the baking gene from my mum, and along with it a belief that flavour always comes first. For me, it's about proper, authentic ingredients and bakes made fresh every time. My <em style={{ fontStyle: 'italic' }}>little kitchen</em> is where it all comes together.</p>
        </div>
        <BakePhoto tone="terracotta" icon="chef-hat" ratio="1 / 1" label="Portrait · photo coming" />
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: '#3D2817', color: '#F7EDE2', padding: '56px 24px 28px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 40, marginBottom: 32 }}>
          {/* Wordmark */}
          <div>
            <div style={{ fontFamily: "'Sacramento', cursive", fontSize: 36, color: '#FDF8F3', lineHeight: 1 }}>Emilia's</div>
            <div style={{ fontFamily: "'Fraunces', serif", fontSize: 13, fontStyle: 'italic', color: 'rgba(247,237,226,0.7)', marginTop: 2 }}>Petite Bakery</div>
          </div>

          {/* Social icons — right aligned */}
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', color: '#FDF8F3', fontWeight: 500, marginBottom: 10 }}>Follow along</div>
            <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
              <a href="https://www.instagram.com/emiliaspetitebakery" target="_blank" rel="noopener" aria-label="Instagram" style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(253,248,243,0.08)', color: '#FDF8F3', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none' }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
              </a>
              <a href="https://www.tiktok.com/@emiliaspetitebakery" target="_blank" rel="noopener" aria-label="TikTok" style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(253,248,243,0.08)', color: '#FDF8F3', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none' }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>
              </a>
              <a href="https://facebook.com/share/1B85HWxUc2/?mibextid=wwXlfr" target="_blank" rel="noopener" aria-label="Facebook" style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(253,248,243,0.08)', color: '#FDF8F3', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none' }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
              </a>
            </div>
          </div>
        </div>

        <div style={{ borderTop: '1px solid rgba(247,237,226,0.15)', paddingTop: 20, fontSize: 12, color: 'rgba(247,237,226,0.55)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
          <div>© {new Date().getFullYear()} Emilia's Petite Bakery.</div>
          <div>Website baked with love by Ollie Tulett</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { EnquiryForm, About, Footer });