function CustomOrdersPage() {
  const { Badge, Button, Card, IconBadge, RooflineDivider } = window.LittleOliveStreetDesignSystem_65d760;

  const [form, setForm] = React.useState({
    name: '', email: '', phone: '', eventDate: '', servingSize: '', flavor: '', theme: '', deliveryNote: '',
  });

  function Icon({ name, color, size = 20 }) {
    const pascal = name.split('-').map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join('');
    const node = window.lucide && window.lucide.icons[pascal];
    if (!node) return null;
    const el = window.lucide.createElement(node);
    el.setAttribute('width', size);
    el.setAttribute('height', size);
    el.setAttribute('stroke', color || 'currentColor');
    return <span style={{ width: size, height: size, display: 'flex', flexShrink: 0, color }} dangerouslySetInnerHTML={{ __html: el.outerHTML }} />;
  }

  function update(key, value) {
    setForm((f) => ({ ...f, [key]: value }));
  }

  function submit(e) {
    e.preventDefault();
    const lines = [
      `Name: ${form.name}`,
      `Event date: ${form.eventDate}`,
      `Serving size: ${form.servingSize}`,
      `Flavor / dessert type: ${form.flavor}`,
      `Theme / inspiration: ${form.theme}`,
      `Pickup or delivery: Pickup (Sugar Land, TX 77479)${form.deliveryNote ? ' — delivery note: ' + form.deliveryNote : ''}`,
      `Phone: ${form.phone}`,
    ].join('\n');
    const subject = encodeURIComponent('Custom Order Request — ' + (form.name || 'New inquiry'));
    const body = encodeURIComponent(lines);
    window.location.href = `mailto:littleolivestreet@gmail.com?subject=${subject}&body=${body}`;
  }

  const fieldStyle = {
    fontFamily: 'var(--font-body)', fontSize: 15, padding: '12px 16px', borderRadius: 'var(--radius-sm)',
    border: '1px solid var(--border-hairline-strong)', background: 'var(--surface-raised)', color: 'var(--text-primary)',
    outline: 'none', width: '100%', boxSizing: 'border-box',
  };
  const labelStyle = { fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 6, display: 'block' };

  return (
    <div>
      <div style={{ padding: `64px var(--page-gutter) 40px`, textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
        <div style={{ marginBottom: 16 }}><Badge tone="mustard">Custom Orders</Badge></div>
        <h1 style={{ font: 'var(--text-display-lg)', color: 'var(--text-primary)', margin: '0 0 14px' }}>
          Need something for a birthday, shower, wedding, or event?
        </h1>
        <p style={{ font: 'var(--text-body-md)', color: 'var(--text-secondary)' }}>
          Custom orders are available with advance notice. Tell us your event date, serving size, flavor,
          and any delivery ask — we'll follow up within a few business days. All orders are pickup in Sugar Land, TX;
          we sometimes offer delivery if it's convenient on your date.
        </p>
      </div>

      <div className="los-grid-4" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: `0 var(--page-gutter) 56px`, gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {[
          { icon: 'party-popper', tone: 'blush', title: 'Best for', body: 'Large events, birthdays, showers, office events, weddings, and holidays.' },
          { icon: 'calendar-clock', tone: 'sage', title: 'Lead time', body: 'Minimum 3 days notice for large orders.' },
          { icon: 'zap', tone: 'mustard', title: 'Rush orders', body: 'Sometimes possible, but limited — ask us first.' },
          { icon: 'hand-coins', tone: 'blush', title: 'Deposit', body: '50% deposit required to reserve your date.' },
        ].map((f) => (
          <Card key={f.title}>
            <IconBadge tone={f.tone} icon={<Icon name={f.icon} color="var(--text-primary)" />} />
            <div style={{ font: 'var(--text-display-sm)', color: 'var(--text-primary)', marginTop: 12, fontSize: 17 }}>{f.title}</div>
            <div style={{ font: 'var(--text-body-sm)', color: 'var(--text-secondary)', marginTop: 6 }}>{f.body}</div>
          </Card>
        ))}
      </div>

      <RooflineDivider peakCount={20} height={36} />

      <div style={{ maxWidth: 640, margin: '0 auto', padding: `56px var(--page-gutter) 72px` }}>
        <h2 style={{ font: 'var(--text-display-sm)', color: 'var(--text-primary)', textAlign: 'center', margin: '0 0 28px' }}>
          Tell us about your event
        </h2>
        <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div className="los-form-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div>
              <label style={labelStyle}>Your name</label>
              <input required style={fieldStyle} value={form.name} onChange={(e) => update('name', e.target.value)} placeholder="Jane Smith" />
            </div>
            <div>
              <label style={labelStyle}>Email</label>
              <input required type="email" style={fieldStyle} value={form.email} onChange={(e) => update('email', e.target.value)} placeholder="you@example.com" />
            </div>
          </div>
          <div className="los-form-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div>
              <label style={labelStyle}>Phone</label>
              <input style={fieldStyle} value={form.phone} onChange={(e) => update('phone', e.target.value)} placeholder="(281) 555-0100" />
            </div>
            <div>
              <label style={labelStyle}>Event date</label>
              <input required type="date" style={fieldStyle} value={form.eventDate} onChange={(e) => update('eventDate', e.target.value)} />
            </div>
          </div>
          <div className="los-form-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div>
              <label style={labelStyle}>Serving size</label>
              <input required style={fieldStyle} value={form.servingSize} onChange={(e) => update('servingSize', e.target.value)} placeholder="e.g. 25 guests" />
            </div>
            <div>
              <label style={labelStyle}>Flavor / dessert type</label>
              <input required style={fieldStyle} value={form.flavor} onChange={(e) => update('flavor', e.target.value)} placeholder="e.g. Kentucky butter pound cake" />
            </div>
          </div>
          <div>
            <label style={labelStyle}>Theme / inspiration</label>
            <textarea style={{ ...fieldStyle, minHeight: 90, resize: 'vertical', fontFamily: 'var(--font-body)' }} value={form.theme} onChange={(e) => update('theme', e.target.value)} placeholder="Colors, theme, or a link/description of what you have in mind" />
          </div>
          <div>
            <label style={labelStyle}>Inspiration photo (optional)</label>
            <image-slot id="custom-order-inspiration" style={{ width: '100%', height: 160 }} shape="rounded" radius="16" placeholder="Drop an inspiration photo"></image-slot>
          </div>
          <div>
            <label style={labelStyle}>Delivery request (optional)</label>
            <input
              style={fieldStyle}
              value={form.deliveryNote}
              onChange={(e) => update('deliveryNote', e.target.value)}
              placeholder="All orders are pickup — note your address here if you'd like to ask about delivery"
            />
          </div>
          <Button type="submit" variant="primary" size="lg">Send custom order request</Button>
          <p style={{ font: 'var(--text-body-sm)', color: 'var(--text-secondary)', textAlign: 'center', margin: 0 }}>
            This opens an email to littleolivestreet@gmail.com with your details — a 50% deposit confirms your date.
          </p>
        </form>
      </div>
    </div>
  );
}