const { Button, Input, Card, SectionHeading, Accordion, SiteHeader, SiteFooter } = window.Ds7NOWDesignSystem_cb8d5f;

function Hero() {
  const [addr, setAddr] = React.useState('');
  const [err, setErr] = React.useState(false);
  const submit = (e) => { e.preventDefault(); if (!addr.trim()) { setErr(true); return; } setErr(false); window.scrollTo({ top: document.getElementById('craving').offsetTop, behavior: 'smooth' }); };
  return (
    <section style={{ position: 'relative', zIndex: 'var(--z-hero)', minHeight: 560, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '96px 16px 64px', background: '#2a2a2a' }}>
      <span style={{ position: 'absolute', right: 16, bottom: 12, font: '11px ui-monospace,monospace', color: '#ffffff80' }}>hero photo not bundled</span>
      <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <SectionHeading inverse as="h1">7-Eleven delivered anytime, anywhere</SectionHeading>
        <form onSubmit={submit} style={{ display: 'flex', gap: 8, width: '100%', maxWidth: 'var(--container-md)', alignItems: 'flex-start' }}>
          <Input icon="pin" placeholder="Enter delivery address" value={addr} error={err} message={err ? 'Please enter a delivery address.' : undefined} onChange={(e) => { setAddr(e.target.value); setErr(false); }} />
          <Button type="submit">Go</Button>
        </form>
      </div>
    </section>
  );
}

const CATS = ['Fresh Food', 'Drinks', 'Snacks'];
function Craving() {
  return (
    <section id="craving" style={{ background: 'var(--bg-band-brand)', padding: 'var(--section-sm) var(--page-gutter)' }}>
      <SectionHeading>What are you craving?</SectionHeading>
      <div style={{ display: 'flex', gap: 16, justifyContent: 'center', overflowX: 'auto', paddingBottom: 4 }}>
        {CATS.map((c) => <Card key={c} variant="category" title={c} href="#" style={{ flexShrink: 0 }} />)}
      </div>
    </section>
  );
}

const PROMOS = [
  { title: 'Hungry?', text: '7-Eleven has a wide selection of fresh grab-and-go options like sandwiches, salads, hot foods, and snacks.', cta: 'Get Food' },
  { title: 'Thirsty?', text: '7-Eleven has all your favorite drinks! Sodas, energy drinks, iced coffees, flavored teas and more.', cta: 'Get Drinks' },
];
function Promos() {
  return (
    <section style={{ padding: '64px 16px', maxWidth: 'var(--container-7xl)', margin: '0 auto' }}>
      <SectionHeading>Convenience at your fingertips</SectionHeading>
      <div style={{ display: 'flex', gap: 24, justifyContent: 'center', flexWrap: 'wrap' }}>
        {PROMOS.map((p) => <Card key={p.title} interactive media title={p.title} text={p.text} actions={<Button elevated href="#">{p.cta}</Button>} />)}
      </div>
    </section>
  );
}

const STATS = [['2 Million+', 'satisfied customers'], ['30 Minutes', 'average delivery time'], ['24/7 Delivery', 'perfect for 2AM munchies']];
function Stats() {
  return (
    <section style={{ padding: '32px 16px 64px', maxWidth: 'var(--container-6xl)', margin: '0 auto', display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap' }}>
      {STATS.map(([t, s]) => <Card key={t} variant="stat" title={t} text={s} />)}
    </section>
  );
}

const FAQ = [
  { question: 'What is 7NOW?', answer: '7NOW is a delivery service, created by 7-Eleven in 2018, that allows customers to order from a selection of over 20,000 products, including meals, snacks, drinks, household essentials, and more, for delivery from a nearby participating 7-Eleven store to their doorstep 24 hours a day, 7 days a week.' },
  { question: 'How does delivery work with 7NOW?', answer: 'You can browse the 7NOW.com website or download the 7NOW app to browse convenience items available for delivery from a 7-Eleven near you. You can add the items to your cart and conveniently checkout all in one spot. Your order will be delivered to the address you provide.' },
  { question: 'Where does 7NOW deliver?', answer: '7NOW offers delivery in over 50 major cities and metroplexes, and the list of areas keeps expanding, so the best way to find out if delivery is available near you is to enter your address on the 7NOW.com website or the 7NOW app.' },
  { question: 'How fast are 7NOW deliveries?', answer: 'The average delivery time is 27 minutes. How long it takes to get your order could change depending on traffic and weather conditions, or other factors, such as availability of drivers (see 7NOW app or 7NOW.com website for additional details on average delivery time).' },
];
function Faq() {
  return (
    <section style={{ padding: '64px 16px' }}>
      <SectionHeading variant="title" style={{ marginBottom: 'var(--space-48)' }}>Frequently asked questions</SectionHeading>
      <Accordion contained items={FAQ} />
    </section>
  );
}

function Homepage() {
  return (
    <>
      <SiteHeader onSignIn={() => alert('Sign in (not part of this kit)')} />
      <main><Hero /><Craving /><Promos /><Stats /><Faq /></main>
      <SiteFooter />
    </>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Homepage />);