FAQ

import { Accordion, AccordionItem } from "@/components/equip/accordion";
import { Avatar } from "@/components/equip/avatar";
import { Button } from "@/components/equip/button";
import { Card, CardBody, CardFooter, CardHeader } from "@/components/equip/card";
import { Heading } from "@/components/equip/heading";
import { Text } from "@/components/equip/text";
import "./faq.css";

const questions = [
  {
    q: "We run everything off spreadsheets. How hard is the move?",
    a: "Upload the sheet as it is. Larder reads your item names, units and suppliers, asks about anything it cannot place, and keeps the original so nothing is lost. Most kitchens are counting in Larder the same afternoon.",
  },
  {
    q: "Does it work in the walk-in, where there is no signal?",
    a: "Yes. Counts are saved on the phone as you go and sync when you step back into wifi. If two people counted the same shelf while offline, Larder shows both numbers and asks which one to keep.",
  },
  {
    q: "Which tills does it connect to?",
    a: "Square, Lightspeed Restaurant, Toast, SumUp, Zettle and Epos Now, each connected in a couple of minutes from Settings. No till, or an older one? Upload the end of day sales report and Larder takes it from there.",
  },
  {
    q: "How does it count stock from what we sell?",
    a: "Each dish has a recipe with quantities. When the till reports a sale, those ingredients come off the shelf; when a delivery is checked in, they go back on. Your weekly count corrects the drift, and the gap is your waste and portioning, in pounds.",
  },
  {
    q: "What happens when a delivery turns up short?",
    a: "Mark the line short when you check it in. Larder adjusts the stock, notes it against the supplier and drafts the credit note request, so nobody has to remember on Monday.",
  },
  {
    q: "Can we get our data out?",
    a: "Whenever you like. Stock, counts, orders, waste and recipes export as CSV from any list, and the Group plan adds an API. If you leave, your account stays readable for 90 days.",
  },
  {
    q: "How is pricing worked out for more than one site?",
    a: "Pantry and Kitchen cover one site each. Group is £119 a month, or £99 a month paid yearly, for up to five sites with transfers between them. Past five, Enterprise is priced with you.",
  },
  {
    q: "Do we need to buy any hardware?",
    a: "No. Any phone or tablet will do. Some kitchens add the shelf kit: a Bluetooth barcode scanner at £89, a label printer at £149 and a walk-in temperature probe at £39.",
  },
];

/*
 * A standalone FAQ: the questions kitchens ask before they switch, one open at a time,
 * with a named person to ask when the answer is not here.
 */
export default function Faq() {
  return (
    <section className="blk-faq" aria-labelledby="faq-title">
      <div className="blk-faq-inner">
        <div className="blk-faq-side">
          <Heading level={2} id="faq-title" className="blk-faq-title">
            Questions kitchens ask before they switch
          </Heading>
          <Text tone="quiet" className="blk-faq-lede">
            Straight answers about counting, tills and what happens to your data. If yours is not here, ask Ruth.
          </Text>

          <Card tone="outline" className="blk-faq-person">
            <div className="blk-faq-person-row">
              <Avatar name="Ruth Adeyemi" size="l" alt="" />
              <CardHeader className="blk-faq-person-header" title="Still stuck? Talk to a person" description="Ruth Adeyemi, kitchen support" />
            </div>
            <CardBody>
              <Text size="s" tone="quiet">
                Ruth ran the pass at a 90-cover bistro for nine years before she ran our support desk. She answers weekdays,
                07:00 to 19:00.
              </Text>
            </CardBody>
            <CardFooter>
              <Button href="#support" variant="outline">
                Talk to Ruth
              </Button>
              <Text as="span" size="s" tone="faint">
                Usually replies in under an hour
              </Text>
            </CardFooter>
          </Card>
        </div>

        <Accordion className="blk-faq-list">
          {questions.map((item, index) => (
            <AccordionItem key={item.q} name="faq-larder" summary={item.q} open={index === 0}>
              <p>{item.a}</p>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
}

@layer blocks {
  .blk-faq {
    container: blk-faq / inline-size;
    background: var(--eq-bg);
    color: var(--eq-ink);
  }

  .blk-faq-inner {
    display: grid;
    gap: calc(var(--eq-space-6) * 1.25);
    max-width: 76rem;
    margin-inline: auto;
    padding: calc(var(--eq-space-6) * 1.5) var(--eq-space-4);
  }

  .blk-faq-side {
    display: grid;
    align-content: start;
    gap: var(--eq-space-4);
    max-width: 30rem;
  }

  .blk-faq-side :is(h2, p) {
    margin: 0;
  }

  .blk-faq-title {
    font-size: clamp(1.75rem, 6cqi, 2.75rem);
    line-height: 1.06;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .blk-faq-lede {
    text-wrap: pretty;
  }

  .blk-faq-person {
    margin-top: var(--eq-space-2);
  }

  .blk-faq-person-row {
    display: flex;
    align-items: center;
    gap: var(--eq-space-3);
  }

  .blk-faq-person-header {
    flex: 1;
    min-width: 0;
  }

  /* Questions read as the big type of the section; answers stay at a comfortable measure. */
  .blk-faq-list .eq-accordion-trigger {
    min-height: var(--eq-h-l);
    padding-block: var(--eq-space-3);
    font-size: var(--eq-text-l);
    letter-spacing: -0.01em;
  }

  .blk-faq-list .eq-accordion-content {
    max-width: 60ch;
    padding-bottom: var(--eq-space-5);
    font-size: var(--eq-text-m);
    line-height: 1.6;
  }

  .blk-faq-list p {
    margin: 0;
  }

  /* Wide: the heading and the person sit in a column beside the questions, and stay in view. */
  @container blk-faq (width >= 52rem) {
    .blk-faq-inner {
      grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.4fr);
      align-items: start;
      gap: calc(var(--eq-space-6) * 2);
      padding-block: calc(var(--eq-space-6) * 2.25);
    }

    .blk-faq-side {
      position: sticky;
      top: var(--eq-space-6);
    }
  }
}