// === Quote form + Blog + Footer ===

function Quote() {
  const [selected, setSelected] = React.useState(["Vinyl Wrap"]);
  const [submitted, setSubmitted] = React.useState(false);
  const services = ["Vinyl Wrap", "PPF", "Ceramic Coating", "Window Tint", "Not sure yet"];

  const toggle = (s) => {
    setSelected((prev) =>
      prev.includes(s) ? prev.filter((x) => x !== s) : [...prev, s]
    );
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 5000);
  };

  return (
    <section className="section quote-section" id="quote">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="section-head-meta">
              <span className="eyebrow">— Get a quote</span>
              <h2 className="h-1">Tell us about<br/>your car.</h2>
            </div>
            <p className="lede">
              Most quotes come back same day. For complex builds we'll text photos and a walk-through.
              No deposit until you're ready.
            </p>
          </div>
        </Reveal>
        <div className="quote-layout">
          <Reveal>
            <div className="quote-info">
              <div className="quote-info-item">
                <div className="quote-info-icon"><Icon.Map/></div>
                <div>
                  <div className="quote-info-label">Visit the shop</div>
                  <div className="quote-info-value">8736 Production Ave, Suite C<br/>San Diego, CA 92121</div>
                </div>
              </div>
              <div className="quote-info-item">
                <div className="quote-info-icon"><Icon.Phone/></div>
                <div>
                  <div className="quote-info-label">Call or text</div>
                  <div className="quote-info-value">(858) 405-2330</div>
                </div>
              </div>
              <div className="quote-info-item">
                <div className="quote-info-icon"><Icon.Mail/></div>
                <div>
                  <div className="quote-info-label">Email</div>
                  <div className="quote-info-value">Wrapstationsd@gmail.com</div>
                </div>
              </div>
              <div className="quote-info-item">
                <div className="quote-info-icon"><Icon.Clock/></div>
                <div>
                  <div className="quote-info-label">Hours</div>
                  <div className="quote-info-value">Mon–Fri · 8am–6pm<br/>Sat · 9am–3pm · Sun closed</div>
                </div>
              </div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <form className="quote-form" onSubmit={handleSubmit}>
              <div className="form-row">
                <div className="form-field">
                  <label>First name</label>
                  <input type="text" placeholder="Marco" required/>
                </div>
                <div className="form-field">
                  <label>Last name</label>
                  <input type="text" placeholder="Rodriguez" required/>
                </div>
              </div>
              <div className="form-row">
                <div className="form-field">
                  <label>Email</label>
                  <input type="email" placeholder="you@email.com" required/>
                </div>
                <div className="form-field">
                  <label>Phone</label>
                  <input type="tel" placeholder="(858) 405-2330" required/>
                </div>
              </div>
              <div className="form-row">
                <div className="form-field">
                  <label>Vehicle</label>
                  <input type="text" placeholder="2024 Tesla Model S" required/>
                </div>
                <div className="form-field">
                  <label>Color / Finish</label>
                  <input type="text" placeholder="Pearl White Multi-Coat"/>
                </div>
              </div>
              <div className="form-field">
                <label>Services interested in</label>
                <div className="service-pills">
                  {services.map((s) => (
                    <span
                      key={s}
                      className={`service-pill ${selected.includes(s) ? "selected" : ""}`}
                      onClick={() => toggle(s)}
                    >
                      {s}
                    </span>
                  ))}
                </div>
              </div>
              <div className="form-field">
                <label>Tell us more</label>
                <textarea placeholder="Coverage area, timing, anything we should know..."></textarea>
              </div>
              {submitted && (
                <div className="form-success">
                  <Icon.Check size={18}/>
                  Thanks! We'll text you within 2 business hours.
                </div>
              )}
              <button type="submit" className="btn btn-primary form-submit">
                Send my quote request
                <Icon.Arrow/>
              </button>
            </form>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

const POSTS = [
  { tag: "Guide", date: "Apr 28", title: "Vinyl wrap vs. PPF: which is right for your Tesla?", excerpt: "They look similar in the showroom, but they solve different problems. Here's how we recommend choosing.", img: "Article hero" },
  { tag: "News", date: "Apr 14", title: "We're now an authorized Modesta installer.", excerpt: "After 18 months of training, we're certified to install Modesta's BC-04 and Pure Metal coatings.", img: "Modesta lab" },
  { tag: "Build", date: "Mar 30", title: "Inside a 6-day full-body PPF on a Lucid Air Sapphire.", excerpt: "Daily photos from drop-off to delivery on one of the most complex installs we've done.", img: "Lucid build" },
];

function Blog() {
  return (
    <section className="section" id="blog">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="section-head-meta">
              <span className="eyebrow">— Journal</span>
              <h2 className="h-1">From the bay.</h2>
            </div>
            <p className="lede">
              Build logs, product deep-dives, and the occasional rant about why automatic car washes
              are still a war crime.
            </p>
          </div>
        </Reveal>
        <div className="blog-grid">
          {POSTS.map((p, i) => (
            <Reveal key={i} delay={i * 80}>
              <a className="blog-card">
                <div className="blog-img">
                  <Placeholder label={p.img} />
                </div>
                <div className="blog-meta">
                  <span className="blog-meta-tag">{p.tag}</span>
                  <span>·</span>
                  <span>{p.date}</span>
                </div>
                <div className="blog-title">{p.title}</div>
                <div className="blog-excerpt">{p.excerpt}</div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-mono">WRAP STATION</div>
        <div className="footer-top">
          <div className="footer-col">
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <img src="images/logo.png" alt="Wrap Station" style={{ height: 36, width: "auto", display: "block" }}/>
            </div>
            <p className="footer-brand-text">
              San Diego's premium vinyl, PPF, ceramic and tint shop. Built for Teslas. Trusted by BMW
              and Mercedes owners.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
              <a href="https://www.instagram.com/wrapstationsocal/" target="_blank" rel="noopener" aria-label="Instagram" style={{ width: 36, height: 36, border: "1px solid var(--line-strong)", borderRadius: 999, display: "grid", placeItems: "center", color: "var(--ink-2)" }}><Icon.Instagram/></a>
              <a href="https://www.youtube.com/channel/UCcb95qApJBAA8QACCIJNuVg" target="_blank" rel="noopener" aria-label="YouTube" style={{ width: 36, height: 36, border: "1px solid var(--line-strong)", borderRadius: 999, display: "grid", placeItems: "center", color: "var(--ink-2)" }}><Icon.YouTube/></a>
              <a href="https://www.facebook.com/WrapStationUSA/" target="_blank" rel="noopener" aria-label="Facebook" style={{ width: 36, height: 36, border: "1px solid var(--line-strong)", borderRadius: 999, display: "grid", placeItems: "center", color: "var(--ink-2)" }}><Icon.Facebook/></a>
            </div>
          </div>
          <div className="footer-col">
            <h4>Services</h4>
            <ul>
              <li><a href="services.html#vinyl">Vinyl Wrap</a></li>
              <li><a href="services.html#ppf">Paint Protection Film</a></li>
              <li><a href="services.html#ceramic">Ceramic Coating</a></li>
              <li><a href="services.html#tint">Window Tint</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <ul>
              <li><a href="about.html">About</a></li>
              <li><a href="portfolio.html">Portfolio</a></li>
              <li><a href="journal.html">Journal</a></li>
              <li><a href="faq.html">FAQ</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <ul>
              <li><a href="contact.html">Get a quote</a></li>
              <li><a>(858) 405-2330</a></li>
              <li><a>Wrapstationsd@gmail.com</a></li>
              <li><a>8736 Production Ave, Ste C</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Wrap Station · San Diego, CA</span>
          <span>Built in 92121 · 3M · Avery · STEK Certified</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Quote, Blog, Footer });