// ARS — page content sections
const { useState: useStateSec } = React;

/* striped image placeholder */
function Placeholder({ label, h = 320, radius = 18, dark = false }) {
  return (
    <div style={{ height: h, borderRadius: radius, position: "relative", overflow: "hidden",
      background: dark ? "var(--navy-deep)" : "#eef0ea",
      backgroundImage: `repeating-linear-gradient(45deg, ${dark ? "rgba(255,255,255,.05)" : "rgba(21,53,106,.05)"} 0 14px, transparent 14px 28px)`,
      border: `1px solid ${dark ? "rgba(255,255,255,.1)" : "var(--line)"}`, display: "grid", placeItems: "center" }}>
      <span style={{ fontFamily: "ui-monospace,monospace", fontSize: 12.5, letterSpacing: ".06em",
        color: dark ? "rgba(255,255,255,.6)" : "var(--ink-2)", textTransform: "uppercase",
        background: dark ? "rgba(0,0,0,.25)" : "rgba(255,255,255,.7)", padding: "6px 12px", borderRadius: 8 }}>{label}</span>
    </div>
  );
}

function Hero({ onBook }) {
  return (
    <section id="home" style={{ background: "var(--navy-deep)", color: "#fff", position: "relative", overflow: "hidden", paddingTop: 108 }}>
      <div className="net-pattern" style={{ position: "absolute", inset: 0, opacity: .06,
        backgroundImage: "linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px)",
        backgroundSize: "26px 26px" }} />
      {/* tennis ball accent */}
      <div className="ars-hero-ball" style={{ position: "absolute", right: "-7%", top: "8%" }}>
        <TennisBall size={420} />
      </div>
      <div className="ars-hero-ring" style={{ position: "absolute", right: "9%", top: "32%", width: 190, height: 190, borderRadius: "50%",
        border: "2px dashed rgba(216,230,59,.4)" }} />
      <div className="wrap" style={{ position: "relative", zIndex: 2, paddingTop: 40, paddingBottom: 80 }}>
        <div style={{ maxWidth: 680 }}>
          <div className="tag rise" style={{ background: "rgba(216,230,59,.16)", color: "var(--ball)" }}>
            <Icon name="pin" size={14} /> Greater Houston · Mobile & Homebase</div>
          <h1 className="display rise" style={{ fontSize: "clamp(46px,8vw,104px)", marginTop: 20, marginBottom: 14, color: "#fff", textShadow: "0 2px 24px rgba(8,20,40,.35)" }}>
            Fresh strings.<br />We come <span style={{ color: "var(--ball)" }}>to you.</span></h1>
          <p className="rise" style={{ fontSize: "clamp(17px,2.2vw,21px)", color: "rgba(255,255,255,.78)", marginTop: 30, maxWidth: 540 }}>
            Pro racquet stringing across the greater Houston area — on-site, same-day homebase, or pick-up & delivery. 30+ years of experience, dialed to your exact tension.</p>
          <div className="rise" style={{ display: "flex", gap: 13, marginTop: 32, flexWrap: "wrap", alignItems: "center" }}>
            <button className="btn btn-ball btn-lg" onClick={onBook}><Icon name="calendar" size={19} /> Book online</button>
            <a className="btn btn-lg" href="#services" style={{ background: "rgba(255,255,255,.1)", color: "#fff", border: "2px solid rgba(255,255,255,.25)" }}>View pricing</a>
            <a href="#availability" style={{ fontWeight: 700, color: "var(--ball)", display: "inline-flex", alignItems: "center", gap: 7 }}>See live availability <Icon name="arrow" size={17} /></a>
          </div>
        </div>
      </div>
      {/* angled bottom edge */}
      <div style={{ height: 54, background: "var(--paper)", clipPath: "polygon(0 100%, 100% 0, 100% 100%, 0 100%)" }} />
    </section>
  );
}

const STEPS = [
  { icon: "calendar", title: "Book in 60 seconds", text: "Pick your service, string, and a time that works. Get an instant price estimate." },
  { icon: "truck", title: "We come to you", text: "On-site at your court or home, or grab-and-go from homebase — your call." },
  { icon: "racquet", title: "Play the same day", text: "Machine-strung to your exact tension, logged for next time, back in your hands fast." },
];
function HowItWorks() {
  return (
    <section id="how" className="section">
      <div className="wrap">
        <Heading align="center" eyebrow="How it works" title="From booked to back on court" sub="No phone tag. No dropping by a shop and waiting days." />
        <div style={{ display: "grid", gap: 22, gridTemplateColumns: "repeat(auto-fit,minmax(260px,1fr))", marginTop: 46 }}>
          {STEPS.map((s, i) => (
            <Reveal key={i} delay={i * 90}>
              <div className="card" style={{ padding: 30, height: "100%", boxShadow: "var(--shadow)" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <span style={{ width: 54, height: 54, borderRadius: 14, background: "var(--green-soft)", color: "var(--green-deep)", display: "grid", placeItems: "center" }}><Icon name={s.icon} size={26} /></span>
                  <span className="display" style={{ fontSize: 46, color: "var(--line)" }}>0{i + 1}</span>
                </div>
                <h3 style={{ fontSize: 21, marginTop: 18, color: "var(--navy)" }}>{s.title}</h3>
                <p style={{ color: "var(--ink-2)", marginTop: 8, marginBottom: 0 }}>{s.text}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const STATS = [["30+", "Years experience"], ["80K+", "Stringing jobs"], ["1K+", "Happy players"], ["100%", "Satisfaction"]];
function Stats() {
  return (
    <section className="section-tight" style={{ background: "var(--green)", color: "#fff" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(150px,1fr))", gap: 24 }}>
        {STATS.map(([n, l], i) => (
          <Reveal key={i} delay={i * 70} style={{ textAlign: "center" }}>
            <div className="display" style={{ fontSize: "clamp(44px,6vw,68px)", color: "#fff" }}>{n}</div>
            <div style={{ fontWeight: 700, textTransform: "uppercase", letterSpacing: ".1em", fontSize: 12.5, color: "rgba(255,255,255,.85)" }}>{l}</div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function About() {
  return (
    <section id="about" className="section">
      <div className="wrap ars-2col" style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1.1fr)", gap: 54, alignItems: "center" }}>
        <Reveal className="ars-about-img">
          <div style={{ position: "relative" }}>
            <img src={(window.__resources && window.__resources.andy) || "assets/andy-stringing.png"} alt="Andy stringing a racquet" style={{ width: "100%", height: 420, objectFit: "cover", objectPosition: "center 22%", borderRadius: 18, display: "block", boxShadow: "var(--shadow-lg)" }} />
            <div className="card ars-float-badge" style={{ position: "absolute", bottom: -22, right: -14, padding: "16px 20px", boxShadow: "var(--shadow-lg)", display: "flex", gap: 12, alignItems: "center" }}>
              <BallMark size={40} />
              <div><div style={{ fontWeight: 800, color: "var(--navy)" }}>USRSA-level work</div><div style={{ fontSize: 13, color: "var(--ink-2)" }}>Tournament-grade tension</div></div>
            </div>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <Heading eyebrow="Meet your stringer" title="Hi, I'm Andy" />
          <p style={{ fontSize: 18, color: "var(--ink-2)", marginTop: 18 }}>
            Leonidas "Andy" Mabry Andrews IV has been stringing racquets for over three decades — for weekend hitters, juniors, college players, and touring pros across Houston.</p>
          <p style={{ fontSize: 18, color: "var(--ink-2)" }}>
            ARS Mobile is a personal, flexible service built around your schedule. I bring the machine to you, dial in your exact setup, and keep a record of it so every restring feels the same.</p>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 20 }}>
            {["Constant-pull machine", "Hybrids & custom setups", "Logged tension history", "Stenciling on request"].map((t) => (
              <span key={t} className="tag"><Icon name="check" size={14} stroke={3} /> {t}</span>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

const AREAS = ["Downtown", "The Heights", "Montrose", "River Oaks", "Memorial", "Katy", "Sugar Land", "Bellaire", "Pearland", "The Woodlands", "Cypress", "Spring"];
function ServiceArea() {
  return (
    <section id="area" className="section" style={{ background: "var(--white)" }}>
      <div className="wrap ars-2col" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 48, alignItems: "center" }}>
        <Reveal>
          <Heading eyebrow="Service area" title="We cover greater Houston" sub="Mobile service throughout the metro. Not sure if you're in range? Just ask when you book." />
          <div style={{ display: "flex", flexWrap: "wrap", gap: 9, marginTop: 24 }}>
            {AREAS.map((a) => (
              <span key={a} style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "9px 15px", borderRadius: 100,
                background: "var(--paper)", border: "1px solid var(--line)", fontWeight: 600, fontSize: 14.5 }}>
                <Icon name="pin" size={14} stroke={2} style={{ color: "var(--green)" }} />{a}</span>
            ))}
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div style={{ position: "relative", borderRadius: 18, overflow: "hidden", border: "1px solid var(--line)", boxShadow: "var(--shadow)" }}>
            <div style={{ height: 380, background: "var(--navy-soft)", position: "relative",
              backgroundImage: "linear-gradient(rgba(21,53,106,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(21,53,106,.07) 1px,transparent 1px)", backgroundSize: "34px 34px" }}>
              {/* faux roads */}
              <div style={{ position: "absolute", inset: 0 }}>
                <div style={{ position: "absolute", top: "50%", left: 0, right: 0, height: 8, background: "rgba(21,53,106,.12)", transform: "translateY(-50%) rotate(-8deg)" }} />
                <div style={{ position: "absolute", left: "46%", top: 0, bottom: 0, width: 8, background: "rgba(21,53,106,.12)", transform: "rotate(6deg)" }} />
                <div style={{ position: "absolute", top: "26%", left: "10%", right: "30%", height: 6, background: "rgba(46,168,106,.18)", transform: "rotate(4deg)" }} />
              </div>
              {/* coverage radius */}
              <div style={{ position: "absolute", top: "50%", left: "48%", transform: "translate(-50%,-50%)", width: 260, height: 260, borderRadius: "50%",
                background: "rgba(46,168,106,.14)", border: "2px dashed var(--green)" }} />
              <div style={{ position: "absolute", top: "50%", left: "48%", transform: "translate(-50%,-50%)" }}><BallMark size={46} /></div>
              <span style={{ position: "absolute", left: "48%", top: "calc(50% + 40px)", transform: "translateX(-50%)", fontWeight: 800, color: "var(--navy)", fontSize: 13 }}>Houston, TX</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

const FAQS = [
  ["How fast can I get my racquet back?", "Same-day homebase and mobile express both turn around the same day in most cases. Next-day homebase is ready the following day. Evening and emergency jobs are available for an added fee."],
  ["Do you carry my string?", "We stock a full range of polyester, multifilament, and synthetic gut. Don't see yours? Request it and we'll special-order (about a 48-hour turnaround). Custom hybrids are always available."],
  ["Can I use my own string?", "Absolutely. Just choose \"I'll provide my own string\" when booking and you'll only pay labor."],
  ["How do I pay?", "Payment is collected in person on completion — cash, card, Venmo, or Zelle all work."],
  ["What tension should I use?", "If you're unsure, leave a note when booking and Andy will recommend a setup based on your racquet and play style. We log it so every restring matches."],
];
function FAQ() {
  const [open, setOpen] = useStateSec(0);
  return (
    <section id="faq" className="section">
      <div className="wrap" style={{ maxWidth: 820 }}>
        <Heading align="center" eyebrow="FAQ" title="Good to know" />
        <div style={{ marginTop: 38, display: "grid", gap: 12 }}>
          {FAQS.map(([q, a], i) => {
            const on = open === i;
            return (
              <div key={i} className="card" style={{ overflow: "hidden", boxShadow: on ? "var(--shadow)" : "none", transition: "box-shadow .2s" }}>
                <button onClick={() => setOpen(on ? -1 : i)} style={{ width: "100%", display: "flex", justifyContent: "space-between",
                  alignItems: "center", gap: 16, padding: "20px 24px", textAlign: "left" }}>
                  <span style={{ fontWeight: 800, fontSize: 17.5, color: "var(--navy)" }}>{q}</span>
                  <span style={{ flexShrink: 0, color: "var(--green)", transform: on ? "rotate(90deg)" : "none", transition: "transform .2s" }}><Icon name="chevron" size={22} /></span>
                </button>
                <div style={{ maxHeight: on ? 240 : 0, overflow: "hidden", transition: "max-height .3s ease" }}>
                  <p style={{ padding: "0 24px 22px", margin: 0, color: "var(--ink-2)", fontSize: 16 }}>{a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Contact({ onBook }) {
  return (
    <section id="contact" className="section" style={{ background: "var(--navy-deep)", color: "#fff", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", left: "-6%", bottom: "-30%", width: 380, height: 380, borderRadius: "50%", border: "2px dashed rgba(216,230,59,.25)" }} />
      <div className="wrap ars-2col" style={{ position: "relative", zIndex: 1, display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48, alignItems: "center" }}>
        <div>
          <Heading eyebrow="Get in touch" title="Ready for fresh strings?" light
            sub="Book online in under a minute, or reach out directly — Andy answers texts fast." />
          <div style={{ display: "flex", gap: 13, marginTop: 30, flexWrap: "wrap" }}>
            <button className="btn btn-ball btn-lg" onClick={onBook}><Icon name="calendar" size={19} /> Book online</button>
            <a className="btn btn-lg" href="#availability" style={{ background: "rgba(255,255,255,.1)", color: "#fff", border: "2px solid rgba(255,255,255,.25)" }}><Icon name="calendar" size={18} /> View availability</a>
            <a className="btn btn-lg" href="tel:8325126570" style={{ background: "rgba(255,255,255,.1)", color: "#fff", border: "2px solid rgba(255,255,255,.25)" }}><Icon name="phone" size={18} /> Call / text</a>
          </div>
        </div>
        <div style={{ display: "grid", gap: 12 }}>
          {[["phone", "Call or text", "832-512-6570", "tel:8325126570"], ["mail", "Email", "andy@arsmobileservices.com", "mailto:andy@arsmobileservices.com"], ["pin", "Based in", "Greater Houston, TX", null], ["clock", "Hours", "Mon–Sat · 8 AM–8 PM", null]].map(([ic, k, v, href]) => {
            const inner = (
              <div style={{ display: "flex", gap: 14, alignItems: "center", padding: "16px 18px", borderRadius: 14, background: "rgba(255,255,255,.06)", border: "1px solid rgba(255,255,255,.12)" }}>
                <span style={{ width: 42, height: 42, borderRadius: 11, background: "var(--ball)", color: "var(--navy-deep)", display: "grid", placeItems: "center" }}><Icon name={ic} size={20} /></span>
                <div><div style={{ fontSize: 12.5, color: "rgba(255,255,255,.6)", fontWeight: 700, textTransform: "uppercase", letterSpacing: ".08em" }}>{k}</div>
                  <div style={{ fontWeight: 700, fontSize: 16.5 }}>{v}</div></div>
              </div>
            );
            return href ? <a key={k} href={href}>{inner}</a> : <div key={k}>{inner}</div>;
          })}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: "#0a1b33", color: "rgba(255,255,255,.7)", padding: "40px 0" }}>
      <div className="wrap" style={{ display: "flex", flexWrap: "wrap", gap: 20, alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <img src={LOGO} alt="ARS" style={{ width: 46, height: 46 }} />
          <div><div style={{ fontWeight: 800, color: "#fff", fontSize: 16 }}>ARS Mobile Services</div>
            <div style={{ fontSize: 13 }}>Andrews Racquet Stringing · Houston, TX</div></div>
        </div>
        <div style={{ fontSize: 13.5 }}>© {new Date().getFullYear()} ARS Mobile Services. Mobile tennis stringing.</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Placeholder, Hero, HowItWorks, Stats, About, ServiceArea, FAQ, Contact, Footer });
