const K = window.DocsKit;
const D = window.Ds7NOWDesignSystem_cb8d5f;
const { Page, H2, H3, P, Rules, Tok, Callout, Example, DoDont, PropsTable, TokenList } = K;
const row = (children, gap = 12) => <div style={{ display: 'flex', gap, flexWrap: 'wrap', alignItems: 'center' }}>{children}</div>;
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 for delivery from a nearby participating 7-Eleven store.' },
  { question: 'Where does 7NOW deliver?', answer: '7NOW offers delivery in over 50 major cities and metroplexes, and the list of areas keeps expanding.' },
  { question: 'How fast are 7NOW deliveries?', answer: 'The average delivery time is 27 minutes.' },
];

function Anatomy({ items }) {
  return <ol className="doc-anatomy">{items.map(([n, d]) => <li key={n}><strong>{n}</strong> {d}</li>)}</ol>;
}

function ButtonPage() {
  return (
    <Page eyebrow="Components · Actions" title="Button" lead="Buttons start actions: submitting an address, signing in, opening a category. Every 7NOW button is a pill.">
      <Example code={`<Button>Go</Button>\n<Button variant="brand">Get the App</Button>\n<Button variant="secondary">Sign in</Button>\n<Button variant="ghost">Cancel</Button>`}>
        {row(<><D.Button>Go</D.Button><D.Button variant="brand">Get the App</D.Button><D.Button variant="secondary">Sign in</D.Button><D.Button variant="ghost">Cancel</D.Button></>)}
      </Example>
      <H2>Variants</H2>
      <div className="doc-table-wrap"><table className="doc-table"><thead><tr><th>Variant</th><th>Use for</th><th>Tokens</th></tr></thead><tbody>
        <tr><td><D.Button size="sm">Primary</D.Button></td><td>The main action on a view, such as “Go” in the hero and “Get Food” on cards. Use one per area.</td><td><Tok>--button-bg-primary*</Tok></td></tr>
        <tr><td><D.Button size="sm" variant="brand">Brand</D.Button></td><td>App promotion and brand-led moments. Use it rarely.</td><td><Tok>--button-bg-brand*</Tok></td></tr>
        <tr><td><D.Button size="sm" variant="secondary">Secondary</D.Button></td><td>Supporting actions, and the header “Sign in” over imagery.</td><td><Tok>--button-bg-secondary*</Tok></td></tr>
        <tr><td><D.Button size="sm" variant="ghost">Ghost</D.Button></td><td>Low-emphasis actions on white surfaces (inferred; not seen on the live homepage).</td><td><Tok>--button-bg-ghost*</Tok></td></tr>
      </tbody></table></div>
      <H2>Sizes</H2>
      <Example code={`<Button size="sm">Sign in</Button>   // 36px\n<Button>Go</Button>                // 56px, min-width 100px`}>
        {row(<><D.Button size="sm" variant="secondary">Sign in</D.Button><D.Button>Go</D.Button></>)}
      </Example>
      <Rules items={[
        <><strong>sm · 36px</strong> for headers and dense rows. Its padding and type step up at 640px.</>,
        <><strong>md · 56px</strong> is the default. It matches the 56px field height, so it lines up in the address form. The old 50px and <Tok>lg</Tok> sizes are merged into md.</>,
      ]} />
      <H2>Modifiers & states</H2>
      <Example code={`<Button elevated href="/food">Get Food</Button>\n<Button disabled>Go</Button>\n<Button block>Continue</Button>`}>
        <div style={{ display: 'grid', gap: 12, maxWidth: 360 }}>{row(<><D.Button elevated>Get Food</D.Button><D.Button disabled>Disabled</D.Button></>)}<D.Button block>Block</D.Button></div>
      </Example>
      <Rules items={['Hover darkens the fill. Press scales to .95. Focus shows a 2px black ring with a 2px offset.', 'Disabled is 50% opacity and ignores the pointer. Explain why nearby rather than relying on a disabled button alone.', <><Tok>elevated</Tok> adds a card shadow. Use it for CTAs that sit on content cards.</>]} />
      <H2>Guidelines</H2>
      <DoDont doEl={row(<><D.Button>Go</D.Button></>)} doText="keep labels to 1–2 words in Title Case, starting with a verb."
        dontEl={row(<><D.Button>Submit your address now</D.Button></>)} dontText="write sentences or use generic labels like “Submit”." />
      <DoDont doEl={row(<><D.Button variant="secondary" size="sm">Sign in</D.Button><D.Button variant="brand" size="sm">Get the App</D.Button></>)} doText="pair one strong button with a quieter one."
        dontEl={row(<><D.Button size="sm">Sign in</D.Button><D.Button size="sm">Get the App</D.Button><D.Button size="sm">Help</D.Button></>)} dontText="line up several primary buttons that compete for attention." />
      <H2>Props</H2>
      <PropsTable rows={[['variant', "'primary' | 'brand' | 'secondary' | 'ghost'", "'primary'", 'Colour treatment'], ['size', "'sm' | 'md'", "'md'", "36px or 56px. 'lg' is deprecated and renders as md."], ['elevated', 'boolean', 'false', 'Card shadow; lifts on hover'], ['block', 'boolean', 'false', 'Full width'], ['href', 'string', '', 'Renders an <a>'], ['disabled', 'boolean', 'false', 'Disables the button']]} />
      <H2>Accessibility</H2>
      <Rules items={['Use href for navigation and a button for actions.', 'Visible text is the accessible name. If a button only has an icon, give it an aria-label.', 'White text on black is 21:1; white on brand green is about 7.9:1.']} />
      <H2>Tokens</H2>
      <TokenList names={['--button-*', '--button-height-sm', '--button-height-md', '--button-min-width', '--button-padding-x', '--button-padding-x-sm', '--button-radius', '--button-text-*', '--label-*', '--button-shadow', '--transition-action', '--scale-press']} />
    </Page>
  );
}

function BadgePage() {
  return (
    <Page eyebrow="Components · Actions" title="Badge" lead="Badges are small bold pills that label deals, membership and stock status. They aren't interactive.">
      <Callout kind="info" title="Inferred">Badges are built from the site's colour tokens. None appear on the public homepage.</Callout>
      <Example code={`<Badge variant="promo">$0 Delivery</Badge>\n<Badge variant="gold">Gold Pass</Badge>`}>
        {row(<><D.Badge>24/7</D.Badge><D.Badge variant="promo">$0 Delivery</D.Badge><D.Badge variant="gold">Gold Pass</D.Badge><D.Badge variant="success">In stock</D.Badge><D.Badge variant="info">New</D.Badge><D.Badge variant="error">Sold out</D.Badge><D.Badge variant="brand">10% Cashback</D.Badge></>, 8)}
      </Example>
      <H2>Variants</H2>
      <div className="doc-table-wrap"><table className="doc-table"><thead><tr><th>Variant</th><th>Use for</th></tr></thead><tbody>
        {[['neutral', 'General labels like “24/7” or a category'], ['promo', 'Deals and discounts. Yellow means a deal.'], ['gold', '7Rewards membership'], ['success', 'Positive status such as “In stock”'], ['info', 'New or informational'], ['error', 'Problems such as “Sold out”'], ['brand', 'Brand rewards such as cashback']].map(([v, u]) => <tr key={v}><td><D.Badge variant={v}>{v}</D.Badge></td><td>{u}</td></tr>)}
      </tbody></table></div>
      <H2>Guidelines</H2>
      <Rules items={['Badges come in one size: 12/16 bold. The old large size is merged into it.', 'Keep text to 1–3 words. Use numerals: “$0 Delivery”, not “Free delivery”.', 'Use one badge per item. Don\'t use a badge as a button.']} />
      <PropsTable rows={[['variant', "'neutral' | 'promo' | 'gold' | 'success' | 'info' | 'error' | 'brand'", "'neutral'", 'Colour pairing from --badge-*'], ['children', 'ReactNode', '', 'Label']]} />
      <H2>Tokens</H2><TokenList names={['--badge-*', '--badge-radius', '--badge-padding-x', '--badge-padding-y', '--caption-*']} />
    </Page>
  );
}

function InputPage() {
  const [v, setV] = React.useState('');
  return (
    <Page eyebrow="Components · Forms" title="Input" lead="A 56px text field with an 8px radius. On 7NOW its main job is the delivery address.">
      <Example code={`<Input icon="pin" placeholder="Enter delivery address" />`}>
        <div style={{ maxWidth: 420 }}><D.Input icon="pin" placeholder="Enter delivery address" value={v} onChange={e => setV(e.target.value)} /></div>
      </Example>
      <H2>States</H2>
      <Example code={`<Input label="Delivery address" />\n<Input label="Delivery address" error message="We couldn't find that address." />\n<Input icon="search" search placeholder="Search 7NOW" />\n<Input disabled placeholder="Disabled" />`}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 16 }}>
          <D.Input label="Delivery address" placeholder="Street, city" />
          <D.Input label="Delivery address" error defaultValue="123 Nowhere" message="We couldn't find that address." />
          <D.Input icon="search" search placeholder="Search 7NOW" />
          <D.Input disabled placeholder="Disabled" />
        </div>
      </Example>
      <H2>Anatomy</H2>
      <Anatomy items={[['Label', '14/20 medium. Optional, but required when there is no visible context.'], ['Leading icon', '20px pin or search glyph, inset 16px.'], ['Field', '56px tall, 1px border, 8px radius. The border turns ink on focus.'], ['Message', '12/16 helper or error text below.']]} />
      <H2>Guidelines</H2>
      <Rules items={['Write placeholders that say what to type, like “Enter delivery address”. Don\'t use placeholders as labels in multi-field forms.', 'Error messages say what went wrong in plain words. They replace the helper text instead of adding to it.', 'Pair the hero field with a md primary Button. Both are 56px.']} />
      <DoDont doEl={<D.Input error defaultValue="123 Nowhere" message="We couldn't find that address." />} doText="explain the problem in a sentence."
        dontEl={<D.Input error defaultValue="123 Nowhere" message="Error 422" />} dontText="show codes or blame the customer." />
      <PropsTable rows={[['label', 'ReactNode', '', 'Visible label'], ['icon', "'pin' | 'search' | ReactNode", '', 'Leading icon'], ['search', 'boolean', 'false', 'Uses the search border colour'], ['error', 'boolean', 'false', 'Error styling and aria-invalid'], ['message', 'ReactNode', '', 'Helper or error text'], ['…input props', '', '', 'Passed to <input>']]} />
      <H2>Tokens</H2><TokenList names={['--input-height', '--input-radius', '--input-padding-x', '--input-icon-offset', '--input-border*', '--input-border-error', '--input-text-placeholder', '--input-bg-disabled', '--body-*', '--label-*', '--caption-*']} />
    </Page>
  );
}

function CardPage() {
  return (
    <Page eyebrow="Components · Content" title="Card" lead="Cards group an image or illustration with a title, copy and an action. There are three variants: content, stat and category.">
      <H2>Content card</H2>
      <Example code={`<Card interactive media="/food.jpg" title="Hungry?"\n  text="7-Eleven has a wide selection…"\n  actions={<Button elevated>Get Food</Button>} />`} surface="muted">
        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
          <D.Card interactive media title="Hungry?" text="7-Eleven has a wide selection of fresh grab-and-go options like sandwiches, salads, hot foods, and snacks." actions={<D.Button elevated>Get Food</D.Button>} />
        </div>
      </Example>
      <Rules items={['White surface, 8px radius, md shadow. 333px wide, at least 450px tall, with a 228.5px image.', 'Centre all text. Use a one-word question title and a single elevated CTA.', <>Add <Tok>interactive</Tok> when the whole card responds to hover.</>]} />
      <H2>Stat card</H2>
      <Example code={`<Card variant="stat" icon="/stat.png" title="30 Minutes" text="average delivery time" />`}>
        {row(<><D.Card variant="stat" title="2 Million+" text="satisfied customers" /><D.Card variant="stat" title="30 Minutes" text="average delivery time" /></>, 24)}
      </Example>
      <Rules items={['No surface or shadow. A 120px illustration sits above a Right Grotesk figure.', 'The figure is a number with its unit in Title Case. The caption is lowercase.']} />
      <H2>Category card</H2>
      <Example code={`<Card variant="category" icon="/fresh.png" title="Fresh Food" href="/fresh" />`} surface="brand">
        {row(<><D.Card variant="category" title="Fresh Food" href="#" /><D.Card variant="category" title="Drinks" href="#" /><D.Card variant="category" title="Snacks" href="#" /></>, 16)}
      </Example>
      <Rules items={['A 76px grey bubble holds a 56px product image, with a 14/20 medium label below.', 'Use it in the “What are you craving?” band on the green tint.', 'The whole tile is the link.']} />
      <PropsTable rows={[['variant', "'content' | 'stat' | 'category'", "'content'", 'Layout'], ['interactive', 'boolean', 'false', 'Hover lifts the shadow'], ['media', 'string | ReactNode | true', '', 'Content image; true shows a grey placeholder'], ['icon', 'string | ReactNode', '', 'Stat or category image'], ['title', 'ReactNode', '', 'Title'], ['text', 'ReactNode', '', 'Body copy'], ['actions', 'ReactNode', '', 'CTA row'], ['href', 'string', '', 'Category link']]} />
      <H2>Tokens</H2><TokenList names={['--card-bg', '--card-radius', '--card-shadow', '--card-shadow-hover', '--card-padding', '--card-*', '--stat-*', '--category-*', '--title-lg-*', '--title-md-*']} />
    </Page>
  );
}

function HeadingPage() {
  return (
    <Page eyebrow="Components · Content" title="Section heading" lead="The H2 that opens each homepage section. Display headings are for marketing moments; title headings are for utility sections.">
      <Example code={`<SectionHeading>What are you craving?</SectionHeading>\n<SectionHeading variant="title">Frequently asked questions</SectionHeading>`}>
        <D.SectionHeading>What are you craving?</D.SectionHeading>
        <D.SectionHeading variant="title" style={{ marginBottom: 0 }}>Frequently asked questions</D.SectionHeading>
      </Example>
      <Example title="Inverse, over imagery" surface="dark" code={`<SectionHeading inverse as="h1">7-Eleven delivered anytime, anywhere</SectionHeading>`}>
        <D.SectionHeading inverse as="h1" style={{ marginBottom: 0 }}>7-Eleven delivered anytime, anywhere</D.SectionHeading>
      </Example>
      <Rules items={['display: Right Grotesk Bold, 32/36, stepping up to 56/64 at 768px.', 'title: Basis Bold, 28/32 at every width.', 'Centred, with 32px below. Use start alignment only in left-aligned layouts.', 'Use one display heading per section. Keep it short: a question or a promise.']} />
      <PropsTable rows={[['variant', "'display' | 'title'", "'display'", 'Type role'], ['inverse', 'boolean', 'false', 'White text'], ['align', "'center' | 'start'", "'center'", 'Alignment'], ['as', "'h1' | 'h2' | 'h3'", "'h2'", 'Heading level']]} />
      <H2>Tokens</H2><TokenList names={['--display-*', '--title-md-*', '--font-display', '--font-heading', '--heading-gap-after', '--text-strong', '--text-inverse']} />
    </Page>
  );
}

function AccordionPage() {
  return (
    <Page eyebrow="Components · Content" title="Accordion" lead="A list of questions that expand to show answers. It's used for the homepage FAQ.">
      <Example code={`<Accordion contained defaultOpen={0} items={[\n  { question: 'What is 7NOW?', answer: '…' },\n]} />`}>
        <D.Accordion defaultOpen={0} items={FAQ} />
      </Example>
      <Rules items={['Questions are 18/28 semibold, in sentence case, and end with a question mark.', 'Answers are full sentences and include their qualifiers. Don\'t shorten legal copy.', 'Rows have gray-200 dividers and a gray-50 hover. The chevron rotates 180° when the row is open.', <>Use <Tok>contained</Tok> to limit the width to 56rem, and put a title SectionHeading above it.</>]} />
      <PropsTable rows={[['items', '{ question, answer }[]', '', 'Rows'], ['contained', 'boolean', 'false', 'Max width 56rem, centred'], ['defaultOpen', 'number', '', 'Index of the row open on load']]} />
      <H2>Accessibility</H2><Rules items={['Built on native <details> and <summary>, so the keyboard and screen readers work without extra code.', 'Focus shows an inset 2px ring.']} />
      <H2>Tokens</H2><TokenList names={['--border-divider', '--bg-row-hover', '--text-muted', '--accordion-padding-x', '--accordion-padding-y', '--body-lg-*', '--rotate-flip']} />
    </Page>
  );
}

function HeaderFooterPage() {
  return (
    <Page eyebrow="Components · Layout" title="Header & footer" lead="The global frame around every 7NOW page.">
      <H2>Site header</H2>
      <Example surface="dark" pad={0} code={`<SiteHeader onSignIn={…} />          // fixed, 36% black over the hero\n<SiteHeader solid />                   // #111, for pages without a hero`}>
        <D.SiteHeader isStatic />
      </Example>
      <Rules items={['Fixed to the top, above everything else (z 50). It sits on a 36% black overlay over the hero photo.', 'The logo is on the left. On the right are a secondary “Sign in” and a brand “Get the App” button, which hides at 768px.', <>Use <Tok>solid</Tok> on pages without a hero image.</>]} />
      <Callout kind="warn" title="Logo">No logo file was supplied. The header shows the word “7NOW” in plain type until you pass a logo URL.</Callout>
      <H2>Site footer</H2>
      <Example pad={0} code={`<SiteFooter />`}><D.SiteFooter /></Example>
      <Rules items={['Ink background. At the top are app badges and link columns; below are legal links, fine print and social icons.', 'Headings are 18/24 bold and links are 14/20 medium. Legal links are bold.', 'Columns stack on mobile and sit in a row at 768px and up.']} />
      <PropsTable rows={[['SiteHeader.logo', 'string | ReactNode', '“7NOW” text', 'Logo'], ['SiteHeader.solid', 'boolean', 'false', 'Opaque ink background'], ['SiteHeader.isStatic', 'boolean', 'false', 'Not fixed'], ['SiteHeader.showGetApp', 'boolean', 'true', 'Shows “Get the App” on mobile'], ['SiteFooter.columns', 'FooterColumn[]', 'live copy', 'Link columns'], ['SiteFooter.legal', 'string[]', 'live copy', 'Legal links'], ['SiteFooter.social', 'FooterSocial[]', 'placeholders', 'Social links'], ['SiteFooter.appBadges', 'ReactNode', 'placeholders', 'Store badges']]} />
    </Page>
  );
}

function AddressPatternPage() {
  const [a, setA] = React.useState(''); const [err, setErr] = React.useState(false); const [ok, setOk] = React.useState(false);
  const submit = (e) => { e.preventDefault(); if (!a.trim()) { setErr(true); setOk(false); } else { setErr(false); setOk(true); } };
  return (
    <Page eyebrow="Patterns" title="Address entry" lead="The hero pattern on 7now.com: a display headline over a photo, with one field and one button.">
      <Example surface="dark" code={`<SectionHeading inverse as="h1">7-Eleven delivered anytime, anywhere</SectionHeading>
<form style={{ display: 'flex', gap: 'var(--gap-sm)', maxWidth: 'var(--container-md)' }}>
  <Input icon="pin" placeholder="Enter delivery address" />
  <Button type="submit">Go</Button>
</form>`}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <D.SectionHeading inverse as="h1">7-Eleven delivered anytime, anywhere</D.SectionHeading>
          <form onSubmit={submit} style={{ display: 'flex', gap: 'var(--gap-sm)', width: '100%', maxWidth: 'var(--container-md)', alignItems: 'flex-start' }}>
            <D.Input icon="pin" placeholder="Enter delivery address" value={a} error={err} message={err ? 'Please enter a delivery address.' : ok ? 'Checking delivery to ' + a + '…' : undefined} onChange={e => { setA(e.target.value); setErr(false); setOk(false); }} />
            <D.Button type="submit">Go</D.Button>
          </form>
        </div>
      </Example>
      <Rules items={['One field and one primary button, nothing else. The field and button are both 56px.', 'The form is 343px wide on mobile and 548px from 768px.', 'An empty submit shows an inline error. Never use an alert.', 'The header overlays the hero, so leave at least 96px of top padding.']} />
      <H2>Page order</H2>
      <P>On the homepage, the address hero is followed by: the category band (green tint), promo content cards, stats, top cities (#EDEDED band), the FAQ and the footer.</P>
      <p className="doc-p"><a href="../ui_kits/website/index.html">Open the full homepage recreation →</a></p>
    </Page>
  );
}

Object.assign(window, { DocsComponents: { ButtonPage, BadgePage, InputPage, CardPage, HeadingPage, AccordionPage, HeaderFooterPage, AddressPatternPage } });