/* global React, CONTACT, DEMO_PHOTOS */

const FAQ_DATA = [
  {
    cat: "Materials",
    items: [
      {
        q: "What's the real difference between quartz and granite",
        a: "Granite is 100% quarried stone, cut into slabs and polished. Every piece is unique. Quartz is engineered: roughly 93% ground natural quartz bound with resin and pigment. Quartz is more consistent, non-porous and needs no sealing. Granite has more character and handles heat better. For a busy family kitchen we usually recommend quartz. For a statement island where you want a one-of-a-kind look, granite."
      },
      {
        q: "What are the benefits of porcelain",
        a: "Porcelain is fired at over 1,200 degC into a sheet that is harder than granite, completely impervious, UV-stable and lighter than traditional thick slabs. It will not stain, etch, scratch or fade  -  which is why it has become the architects' choice for minimalist kitchens and outdoor counters. The trade-off is cost and the requirement for an experienced fabricator: cutting porcelain badly is easy."
      },
      {
        q: "Which material is best for a busy family kitchen",
        a: "Quartz, almost without exception. It looks like stone, behaves like a laboratory bench, and forgives the kind of life a family kitchen lives. Pick a mid-tone with some movement  -  solid colours show every breadcrumb."
      },
      {
        q: "Which material is best outdoors",
        a: "Porcelain or granite. Quartz contains resin, which discolours under UV  -  we'll never sell you a quartz outdoor counter. For a BBQ counter or outdoor kitchen we lean porcelain; for a windowsill or garden bench, granite."
      },
      {
        q: "Will dark colours show marks more easily",
        a: "Yes, more than mid-tones. Dark polished surfaces show every fingerprint, water spot and dust speck. We love a dark worktop  -  but if you wipe down your kitchen twice a day already, it'll suit you. If you don't, consider a honed (matte) finish instead of polished, which hides marks beautifully."
      },
      {
        q: "How heat-resistant is quartz",
        a: "Quartz handles temperatures up to about 150 degC indefinitely. A hot saucepan straight off the hob Use a trivet. A casserole dish from a 180 degC oven Trivet. We'd give the same advice for any worktop, including granite  -  thermal shock can crack stone too."
      },
      {
        q: "Does quartz need to be sealed",
        a: "No. Quartz is non-porous, so nothing can soak in. A wipe with a soft cloth and warm soapy water is the entire maintenance regime. Granite, by contrast, should be re-sealed every 12-18 months  -  we provide the sealant and instructions when we fit."
      },
      {
        q: "What causes seams and will they be visible",
        a: "Slabs come in fixed sizes  -  typically 3.2 m x 1.6 m. Anything longer than the slab needs a seam. We design seam placement carefully: typically at a sink cutout or in front of a hob where the eye doesn't dwell. With modern colour-matched adhesive a well-placed seam in a quartz worktop is essentially invisible. In a heavily-veined material it is harder to hide, so we plan the cut and joins carefully."
      },
    ]
  },
  {
    cat: "Quote & Process",
    items: [
      {
        q: "How do I get a quote",
        a: `Three ways, in order of how much detail you can give us: (1) the quote form on this site  -  usually back within 24 hours, (2) a phone call to the workshop on ${CONTACT.phoneDisplay}, (3) drop into the showroom in Kilbeggan and we'll walk the slabs with you. All quotes are free and non-binding.`
      },
      {
        q: "How accurate are your estimates",
        a: "Our written estimates are usually within 3-5% of the final invoiced figure, provided the project doesn't change. The estimate covers material, fabrication, edge profile, sink cutout, delivery and fitting. The only thing that moves the figure is if the room changes after measure  -  which is rare."
      },
      {
        q: "Do I need exact measurements to get a quote",
        a: "No. A rough length and width to the nearest 100 mm is plenty for an estimate. Our measurer will produce a millimetre-perfect digital template on site once the project is confirmed."
      },
      {
        q: "How long does it take from measure to fitted",
        a: "Once your kitchen units are installed, level and ready to template, we measure on site and most in-stock quartz, granite and porcelain worktops are fitted 7-10 days later. The full quote-to-fit timeline depends on when your kitchen is ready for measure."
      },
      {
        q: "Can I come and see the slabs before deciding",
        a: "Please do  -  it's the single best thing you can do. The showroom is open Monday to Friday, 9:30 to 1 and 2 to 4:30, and Saturday mornings 9 to 1. No appointment needed but a call ahead lets us have your favourites out and lit."
      },
    ]
  },
  {
    cat: "Before the Measure",
    items: [
      {
        q: "What needs to be in place before your measurer arrives",
        a: "Kitchen units fully installed and level. Sink, hob and tap chosen and on site (we don't need them fitted  -  just present, so we can template around the actual fixtures). Walls finished and tiled if you're tiling up to the underside of the worktop. A clear bench surface to template against."
      },
      {
        q: "Do my kitchen units need to be fully installed before measuring",
        a: "Yes  -  fully installed, levelled and screwed down. We template directly off the unit tops with a laser jig, and a 2 mm shift after templating becomes a 2 mm shift in the worktop. There is no exception to this rule."
      },
      {
        q: "Can I change my mind after templating",
        a: "Material colour: yes, within 24 hours of templating, provided we haven't cut yet. Layout or dimensions: only if the room itself changed  -  and in that case we re-template. We'll never start cutting without confirming with you first."
      },
      {
        q: "Does a decision-maker need to be on site",
        a: "Strongly recommended for the measure. We discuss seam placement, edge profile, overhang and any quirks of the room. These are decisions that affect the final look  -  we don't want to be making them by guesswork or by text message."
      },
      {
        q: "What if I want to add something on the day of the measure",
        a: "Splashbacks, upstands, a window cill, a small island top  -  yes, we can take that template the same day. Anything bigger may need a second visit. The measurer carries a laptop with live pricing and can give you a fresh quote on the spot."
      },
    ]
  },
  {
    cat: "Fitting Day",
    items: [
      {
        q: "Do I need to be home on fitting day",
        a: "Yes  -  at least at the start and the end. We need someone to confirm the worktop is what they expected before we drill into it (sink and tap cutouts) and to walk it with us before we leave. The middle hours you can be elsewhere."
      },
      {
        q: "How long does fitting take",
        a: "A standard kitchen  -  two fitters, three to four hours. A large kitchen with an island and waterfall ends  -  half a day. Bathrooms an hour. We'll tell you the realistic time when we book the slot."
      },
      {
        q: "What do I need to have disconnected before the fitters arrive",
        a: "If we're replacing an existing worktop: the sink and hob must be disconnected by a plumber and electrician respectively. We can recommend tradespeople. If it's a new build, this doesn't apply."
      },
      {
        q: "What happens if something isn't right after fitting",
        a: "We come back. The foreman walks every install before we leave, and any snag flagged in the first 12 months is on us, no question. Stone is forever, and so is our guarantee on it."
      },
      {
        q: "Do you clean up after installation",
        a: "Yes  -  Hoover, wipe-down, off-cuts taken away in the van. We don't ask you to do anything except put the kettle on."
      },
    ]
  },
];

function FAQ({ navigate }) {
  const [cat, setCat] = React.useState(FAQ_DATA[0].cat);
  const [openId, setOpenId] = React.useState(0);

  const items = FAQ_DATA.find(c => c.cat === cat).items;

  return (
    <React.Fragment>
      {/* Hero */}
      <section style={{padding: "var(--pad)", paddingTop: "clamp(118px, 13vw, 170px)", paddingBottom: "clamp(56px, 6vw, 90px)", background: "var(--slate)", color: "white", position: "relative", overflow: "hidden"}}>
        <div className="photo-hero" style={{position: "absolute", inset: 0, opacity: 0.3, backgroundImage: `url(${DEMO_PHOTOS.kitchenLight})`}}></div>
        <div className="container" style={{position: "relative", zIndex: 2}}>
          <div className="kicker" style={{color: "#7CC3D8", marginBottom: 24}}>The questions we get most</div>
          <h1 className="display" style={{color: "white", maxWidth: 1000}}>
            Everything you'd ask<br /><em className="pull" style={{color: "#7CC3D8"}}>before you picked up the phone.</em>
          </h1>
          <p className="lede" style={{color: "rgba(255,255,255,0.78)", maxWidth: 560, marginTop: 28, fontSize: 18}}>
            Honest answers to the questions our office takes every week. Materials, process, what to have ready, what to expect on the day.
          </p>
        </div>
      </section>

      {/* Category tabs */}
      <section style={{padding: "32px var(--pad) 0", background: "var(--warm)", borderBottom: "1px solid var(--line)", position: "sticky", top: 64, zIndex: 50}}>
        <div className="container" style={{display: "flex", gap: 40, overflowX: "auto"}}>
          {FAQ_DATA.map(c => (
            <button key={c.cat}
                    onClick={() => { setCat(c.cat); setOpenId(0); }}
                    className={"faq-cat-tab" + (cat === c.cat ? " active" : "")}>
              {c.cat} <span style={{color: "var(--grey-2)", marginLeft: 8}}>- {c.items.length}</span>
            </button>
          ))}
        </div>
      </section>

      {/* Items */}
      <section className="section" style={{paddingTop: "clamp(60px, 7vw, 100px)"}}>
        <div className="container" style={{maxWidth: 1100}}>
          {items.map((it, i) => (
            <div key={i} className={"faq-item" + (openId === i ? " open" : "")}>
              <button className="faq-q" onClick={() => setOpenId(openId === i ? -1 : i)}>
                <span>
                  <span style={{fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.18em", color: "var(--teal)", marginRight: 24, verticalAlign: "middle"}}>0{i + 1}</span>
                  {it.q}
                </span>
                <span className="plus"></span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{it.a}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Still have a Q */}
      <section className="section lt">
        <div className="container faq-contact-grid" style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center"}}>
          <div>
            <div className="kicker" style={{marginBottom: 20}}>The office is on</div>
            <h2 className="title" style={{color: "var(--navy)"}}>
              Still have a question<br /><em className="pull" style={{color: "var(--teal)"}}>Just ring.</em>
            </h2>
            <p style={{marginTop: 28, fontSize: 17, lineHeight: 1.6, color: "var(--grey)", maxWidth: 480}}>
              A real person answers the phone, Monday to Saturday. Not a switchboard, not an answering machine  -  usually Marie, occasionally Conor, and you'll get a sensible answer the first time.
            </p>
          </div>

          <div style={{padding: 48, background: "var(--white)", border: "1px solid var(--line)"}}>
            <div style={{borderBottom: "1px solid var(--line)", paddingBottom: 24, marginBottom: 24}}>
              <div className="kicker" style={{marginBottom: 8}}>Phone  -  fastest</div>
              <a href={CONTACT.phoneHref} style={{fontFamily: "var(--serif)", fontSize: 36, color: "var(--navy)", fontWeight: 500}}>{CONTACT.phoneDisplay}</a>
              <div style={{fontSize: 13, color: "var(--grey)", marginTop: 6}}>Mon–Fri 9:30–13:00 / 14:00–16:30 · Sat 9:00–13:00</div>
            </div>
            <div style={{marginBottom: 32}}>
              <div className="kicker" style={{marginBottom: 8}}>Email</div>
              <a href={`mailto:${CONTACT.email}`} style={{fontSize: 18, color: "var(--navy)"}}>{CONTACT.email}</a>
            </div>
            <a className="btn btn-teal" href="#/quotes" onClick={(e) => { e.preventDefault(); navigate("quotes"); }}>
              Or get a written quote <span className="arr">{"->"}</span>
            </a>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.FAQ = FAQ;
