const LOS_FAQS = [
  {
    q: 'How far in advance do I need to order?',
    a: 'Standard menu items typically need 1–2 business days notice, unless an advertised pop-up. Custom orders (birthdays, showers, weddings, events) need a minimum of 3-5 days for large orders — see the Custom Orders page for details.',
  },
  {
    q: 'Do you deliver, or is it pickup only?',
    a: 'All orders are pickup in Sugar Land, TX (77479). Delivery isn\'t a standing service, but we sometimes offer it if it\'s convenient on that day — ask us when you order and we\'ll let you know. We\'d love to add DoorDash delivery down the road.',
  },
  {
    q: 'How should I store my dessert, and how long does it stay fresh?',
    a: 'Most items are best enjoyed within 3–4 days. Keep cakes, pies, and pastries in an airtight container at room temperature for the first day or two, then refrigerate to extend freshness. We\'ll include care instructions with every order.',
  },
  {
    q: 'Do you accommodate allergies or dietary restrictions?',
    a: 'Everything is baked in a home kitchen that regularly handles wheat, dairy, eggs, tree nuts and soy, so we can\'t guarantee an allergen-free product. Let us know about any allergies in your order notes and we\'ll do our best to advise.',
  },
  {
    q: 'How do I pay?',
    a: 'Standard menu items are ordered and paid for securely right on this site, powered by Snipcart. Custom orders require a 50% deposit to reserve your date, with the remainder due before pickup or delivery.',
  },
  {
    q: 'What\'s your cancellation policy?',
    a: 'Standard orders can be canceled or rescheduled up to 24 hours before pickup. Custom order deposits reserve your date and are non-refundable, but we\'re happy to work with you on rescheduling when possible.',
  },
];

function FaqItem({ item }) {
  const [open, setOpen] = React.useState(false);
  function Icon({ name, size = 18 }) {
    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', 'var(--text-secondary)');
    return <span style={{ width: size, height: size, display: 'flex', flexShrink: 0, color: 'var(--text-secondary)' }} dangerouslySetInnerHTML={{ __html: el.outerHTML }} />;
  }
  return (
    <div style={{ borderBottom: '1px solid var(--border-hairline)', padding: '18px 0' }}>
      <div
        onClick={() => setOpen((o) => !o)}
        style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer', gap: 12 }}
      >
        <span style={{ font: 'var(--text-display-sm)', fontSize: 16.5, color: 'var(--text-primary)' }}>{item.q}</span>
        <Icon name={open ? 'minus' : 'plus'} />
      </div>
      {open && (
        <p style={{ font: 'var(--text-body-md)', color: 'var(--text-secondary)', margin: '12px 0 0' }}>{item.a}</p>
      )}
    </div>
  );
}

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

  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 }} />;
  }

  return (
    <div>
      <div style={{ padding: `64px var(--page-gutter) 40px`, textAlign: 'center', maxWidth: 680, margin: '0 auto' }}>
        <div style={{ marginBottom: 16 }}><Badge tone="sage">Contact & FAQ</Badge></div>
        <h1 style={{ font: 'var(--text-display-lg)', color: 'var(--text-primary)', margin: '0 0 14px' }}>
          Questions? We've got answers.
        </h1>
        <p style={{ font: 'var(--text-body-md)', color: 'var(--text-secondary)' }}>
          Can't find what you need below — email us and we'll reply within 1–2 business days.
        </p>
      </div>

      <div className="los-grid-3" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: `0 var(--page-gutter) 56px`, gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        <Card>
          <IconBadge tone="blush" icon={<Icon name="mail" color="var(--accent-primary)" />} />
          <div style={{ font: 'var(--text-label)', color: 'var(--text-secondary)', marginTop: 14 }}>Email</div>
          <a href="mailto:littleolivestreet@gmail.com" style={{ font: 'var(--text-body-md)', color: 'var(--text-primary)', textDecoration: 'none' }}>
            littleolivestreet@gmail.com
          </a>
        </Card>
        <Card>
          <IconBadge tone="sage" icon={<Icon name="map-pin" color="var(--accent-sage)" />} />
          <div style={{ font: 'var(--text-label)', color: 'var(--text-secondary)', marginTop: 14 }}>Location</div>
          <div style={{ font: 'var(--text-body-md)', color: 'var(--text-primary)' }}>Sugar Land, TX 77479</div>
          <div style={{ font: 'var(--text-body-sm)', color: 'var(--text-secondary)', marginTop: 4 }}>Pickup address shared after ordering</div>
        </Card>
        <Card>
          <IconBadge tone="mustard" icon={<Icon name="truck" color="var(--accent-mustard)" />} />
          <div style={{ font: 'var(--text-label)', color: 'var(--text-secondary)', marginTop: 14 }}>Delivery</div>
          <div style={{ font: 'var(--text-body-md)', color: 'var(--text-primary)' }}>Pickup only — ask about delivery</div>
        </Card>
      </div>

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

      <div style={{ maxWidth: 'var(--container-narrow)', margin: '0 auto', padding: `48px var(--page-gutter) 72px` }}>
        <h2 style={{ font: 'var(--text-display-sm)', color: 'var(--text-primary)', textAlign: 'center', margin: '0 0 8px' }}>
          Frequently asked questions
        </h2>
        <div>
          {LOS_FAQS.map((item) => <FaqItem key={item.q} item={item} />)}
        </div>
      </div>
    </div>
  );
}