/* Location, FAQ, Final CTA */

const { useState: useStateB } = React;

const Location = () => (
  <section className="section section--mist" id="contact">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow">Find us</div>
        <h2>One site.<br />Right where you need it.</h2>
      </div>
      <div className="location-grid">
        <div className="location-info">
          <h2 style={{ fontSize: "clamp(28px, 3vw, 38px)" }}>Blairgowrie facility</h2>
          <address>
            45 Hughes Road<br />
            Blairgowrie VIC 3942
          </address>
          <div className="location-meta">
            <div><b>From Melbourne</b> About 90 minutes from the CBD via the Mornington Peninsula Freeway.</div>
            <div><b>From Sorrento</b> 6 minutes — straight up Point Nepean Road.</div>
            <div><b>From Rosebud</b> 12 minutes via Boneo Road.</div>
            <div><b>Office hours</b> Friday &amp; Saturday, 8am–4pm. Other times by appointment.</div>
          </div>
          <div className="serving">
            Serving Blairgowrie, Sorrento, Rye, Tootgarook, Rosebud, Dromana, McCrae, Safety Beach and the wider Mornington Peninsula.
          </div>
          <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a className="btn btn-primary btn-sm" href="#contact-form">Get directions <Icon.Arrow size={14} /></a>
            <a className="btn btn-secondary btn-sm" href="#contact-form">Talk to us</a>
          </div>
        </div>
        <div className="map-frame">
          <MapArt />
          <div className="map-pin">
            <div className="label">Storage Cartel · Blairgowrie</div>
            <div className="pin-dot" />
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ---------------- FAQ ---------------- */

const FAQS = [
  {
    q: "When can I access my unit?",
    a: "Standard access is Friday and Saturday during office hours — included in your monthly rate. A manager meets you, opens the facility, and stays while you load or unload. Outside those windows, request a premium callout ($75/visit) or short-notice booking ($45/visit) through your account.",
  },
  {
    q: "How does pricing work — are there hidden fees?",
    a: "No. Your monthly rate is your monthly rate. No bond, no security deposit, no key deposit, no setup or admin fee, no exit fee. Optional services like delivery coordination or move-in help are clearly priced on the Pricing page — you only pay for what you choose.",
  },
  {
    q: "How secure is the facility?",
    a: "Manager-attended access is the security model. Nobody enters without a booked visit and a member of our team on site. The facility itself has 24-hour monitoring, controlled perimeter, and your unit is sealed once your visit ends — recorded and timestamped.",
  },
  {
    q: "How quickly can I move in?",
    a: "Most customers complete signup in under five minutes and move in on the next available Friday or Saturday. If you need urgent access, contact us — short-notice move-ins are available subject to manager availability.",
  },
];

const FAQ = () => {
  const [open, setOpen] = useStateB(0);
  return (
    <section className="section section--steel" id="faq">
      <div className="container">
        <div className="faq">
          <div>
            <div className="eyebrow">Common questions</div>
            <h2>Quick answers.<br />Full FAQ if you want it.</h2>
            <p className="lede">The four questions we hear most. If yours isn't here, send it through.</p>
            <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-secondary btn-sm" href="#faq-all">Full FAQ <Icon.Arrow size={14} /></a>
              <a className="btn btn-ghost btn-sm" href="#contact">Ask us a question →</a>
            </div>
          </div>
          <div className="faq-list" role="list">
            {FAQS.map((f, i) => (
              <div className={"faq-item" + (open === i ? " open" : "")} key={i} role="listitem">
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{f.q}</span>
                  <span className="faq-toggle"><Icon.Plus /></span>
                </button>
                <div className="faq-a">
                  <div>{f.a}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const FinalCTA = ({ color = "red" }) => (
  <section className={"final-cta final-cta--" + color} id="book">
    <div className="container">
      <div>
        <div className="eyebrow on-dark" style={{ color: "rgba(255,255,255,0.8)" }}>Ready when you are</div>
        <h2>Book your unit in five minutes.<br />Move in this weekend.</h2>
        <p className="lede">No bond. No surprise fees. Cancel any time with 14 days notice.</p>
      </div>
      <div>
        <a className="btn btn-primary" href="#book" style={{ fontSize: 19, padding: "20px 32px" }}>
          Book Storage <Icon.Arrow size={18} />
        </a>
      </div>
    </div>
  </section>
);

Object.assign(window, { Location, FAQ, FinalCTA });