// Growth + trust enhancements — each gated behind a Tweak so the user can
// compare "current" vs "improved". Floating CTA, FAQ, guarantee seal, etc.

// ── Floating "Free Quote" button ─────────────────────────────────────────────
function FloatingCTA({ onQuote, hidden }) {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > window.innerHeight * 0.9);
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  if (hidden) return null;
  return (
    <button onClick={onQuote} aria-label="Request a free quote"
      style={{ position: "fixed", right: 26, bottom: 26, zIndex: 120,
        display: "inline-flex", alignItems: "center", gap: 10,
        fontFamily: FONT.body, fontSize: 14, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase",
        color: "#1a130b", background: NP.gold, border: "none", borderRadius: 999, cursor: "pointer",
        padding: "15px 24px", boxShadow: "0 14px 38px rgba(0,0,0,0.4), 0 0 0 1px rgba(200,174,118,0.5)",
        opacity: show ? 1 : 0, transform: show ? "translateY(0)" : "translateY(20px)",
        pointerEvents: show ? "auto" : "none", transition: "opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), background .18s" }}
      onMouseEnter={(e) => (e.currentTarget.style.background = NP.goldSoft)}
      onMouseLeave={(e) => (e.currentTarget.style.background = NP.gold)}>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 3v18M3 12h18" stroke="#1a130b" strokeWidth="2.4" strokeLinecap="round"/></svg>
      Free Quote
    </button>
  );
}

// ── Guarantee seal (used inside the closing CTA) ─────────────────────────────
function GuaranteeSeal({ size = 132 }) {
  return (
    <div style={{ width: size, height: size, position: "relative", flex: "0 0 auto" }}>
      <img src="assets/img/5-year-warranty.svg" alt="5-year warranty" style={{ width: "100%", height: "100%", display: "block", opacity: 0.89 }} />
    </div>
  );
}

// ── FAQ section ──────────────────────────────────────────────────────────────
const FAQS = [
  ["What exactly is Alumawood or similar materials?", "Alumawood is a premium aluminum material that has the look of real wood with none of the maintenance. It won't rot, warp, crack, or attract termites, and the factory finish holds up to Arizona sun without repainting. Other similar brands we use include Elitewood and Cedarwood."],
  ["How long does the whole process take?", "Most projects go from first call to finished install in a matter of weeks. Once the materials come in, the on-site install itself is typically just a few days."],
  ["What kind of warranty do you offer?", "We back every install with a 5-year workmanship warranty, on top of the manufacturer's finish and materials warranty. We're licensed, bonded, and insured under ROC #366340."],
  ["Can I finance my project?", "Absolutely. We offer flexible monthly financing so you can get the shade you want now and pay over time — use the calculator above to estimate a payment, and we'll help you pre-qualify."],
  ["Do you handle permits and engineering?", "Yes we handle them for all projects that needs a permit. We create professional, engineered drawings — plot plans, elevations, and footing details to current code. We also manage permit submittal and inspections for you."],
  ["Which areas do you serve?", "We cover the greater Phoenix metro — Phoenix, Scottsdale, Tempe, Chandler, Gilbert, Mesa, Queen Creek, San Tan Valley, and Rio Verde. Not sure if you're in range? Just ask."],
];
function FAQ({ hidden, onQuote }) {
  const w = useW();
  const mobile = w < 768;
  const [open, setOpen] = React.useState(0);
  if (hidden) return null;
  return (
    <Section id="faq" bg={NP.bone}>
      <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "0.85fr 1.15fr", gap: mobile ? 36 : 64, alignItems: "flex-start" }}>
        <Reveal>
          <Kicker dark={false}>Questions</Kicker>
          <h2 style={{ fontFamily: FONT.serif, fontWeight: 500, fontSize: "clamp(40px,4.6vw,58px)", color: NP.textD, margin: "16px 0 0", lineHeight: 1.02, letterSpacing: "-0.01em" }}>
            Good to know<br />before you build.
          </h2>
          <p style={{ fontFamily: FONT.body, fontSize: 16.5, lineHeight: 1.65, color: NP.textD2, marginTop: 20, maxWidth: 320 }}>
            Straight answers to what homeowners ask us most. Still curious about something?
          </p>
          <div style={{ marginTop: 22 }}>
            <Btn variant="outlineDark" onClick={onQuote}>Ask us directly →</Btn>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div>
            {FAQS.map(([q, a], i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ borderTop: `1px solid rgba(34,28,21,0.16)`, borderBottom: i === FAQS.length - 1 ? `1px solid rgba(34,28,21,0.16)` : "none" }}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20,
                      padding: "22px 4px", background: "none", border: "none", cursor: "pointer", textAlign: "left" }}>
                    <span style={{ fontFamily: FONT.body, fontSize: 18, fontWeight: 700, color: NP.textD }}>{q}</span>
                    <span style={{ flex: "0 0 auto", width: 26, height: 26, borderRadius: 13, border: `1px solid ${NP.goldDeep}`,
                      display: "flex", alignItems: "center", justifyContent: "center", color: NP.goldDeep, fontSize: 17, lineHeight: 1,
                      transform: isOpen ? "rotate(45deg)" : "none", transition: "transform .22s ease" }}>+</span>
                  </button>
                  <div style={{ maxHeight: isOpen ? 220 : 0, overflow: "hidden", transition: "max-height .32s ease" }}>
                    <p style={{ fontFamily: FONT.body, fontSize: 16, lineHeight: 1.65, color: NP.textD2, margin: "0 40px 24px 4px" }}>{a}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

Object.assign(window, { FloatingCTA, GuaranteeSeal, FAQ });
