/* global React */
const { useState, useEffect, useRef } = React;

/* =====================================================
   NAV
====================================================== */
function Nav() {
  const [light, setLight] = useState(false);
  useEffect(() => {
    const onScroll = () => setLight(window.scrollY > window.innerHeight - 80);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${light ? "is-light" : ""}`}>
      <a href="#top" className="brand">
        <span className="bird" aria-hidden="true"></span>
        <span>STARLING TREE</span>
      </a>
      <div className="links">
        <a href="#services">Services</a>
        <a href="#area">Service Area</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
      </div>
      <a href="#contact" className="cta">Get a Quote →</a>
    </nav>
  );
}

/* =====================================================
   HERO
====================================================== */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-bg">
        <img src="assets/hero.jpg" alt="Coastal Maine — pines, birches, and ocean view" />
      </div>

      <div className="hero-wordmark-stage">
        <h1 className="hero-wordmark display">
          <span className="word word-starling">STARLING</span>
          <span className="word word-tree" data-word="TREE">TREE</span>
        </h1>
      </div>

      <div className="frame">
        <div className="top-meta">
          <span className="crosshair">44.4143° N · 68.5895° W</span>
          <span>EST. 2022 · BLUE HILL, ME</span>
        </div>
        <div className="bottom-block">
          <p className="tagline tagline-solo">
            MAINE&nbsp;ARBORISTS
            <em>Climbing · Clearing · Caring for the Coastal Canopy</em>
          </p>
        </div>
      </div>
      <div className="scroll-hint">SCROLL</div>
      <div className="scrim-edge"></div>
    </section>
  );
}

/* =====================================================
   MARQUEE
====================================================== */
function Marquee() {
  const items = [
    "TREE REMOVAL", "PRUNING", "LAND CLEARING",
    "CABLING & STRUCTURAL SUPPORT", "STORM RESPONSE",
    "STUMP GRINDING", "DEBRIS HAULING", "FIREWOOD"
  ];
  const row = (
    <span>
      {items.map((s, i) => (
        <React.Fragment key={i}>
          {s}<span className="dot"></span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {row}{row}
      </div>
    </div>
  );
}

/* =====================================================
   SERVICES
====================================================== */
const SERVICES = [
  {
    n: "01",
    title: "Tree Removal",
    body: "High-risk, high-skill removal for trees of all sizes and complexity. Close to structures, over power lines, limited access — we've done it. Priced by size and complexity, assessed on-site."
  },
  {
    n: "02",
    title: "Pruning & Canopy Work",
    body: "Deadwood removal, crown raising, view maintenance, orchard pruning, and aerial pruning from aloft. Hourly and day-rate options available."
  },
  {
    n: "03",
    title: "Land Clearing",
    body: "Tractor-assisted clearing and material removal, sapling management, brush cleanup. Day-rate pricing. Great for property prep, lot clearing, or reclaiming overgrown fields."
  },
  {
    n: "04",
    title: "Cabling & Support",
    body: "Cobra dynamic cabling systems for trees under structural stress. Keeps valuable or hazardous trees standing safely. Includes annual inspection and tightening service."
  },
  {
    n: "05",
    title: "Storm Response",
    body: "Emergency storm cleanup, hazard assessment, and same-day response when conditions allow. We work fast, we work safely."
  },
  {
    n: "06",
    title: "Stump Grinding & Cleanup",
    body: "Stump grinding, chipping, debris hauling, and firewood drop-off. We handle the aftermath, not just the cut."
  }
];

function Services() {
  return (
    <section className="section" id="services">
      <div className="section-head">
        <div>
          <div className="num">02 · SERVICES</div>
        </div>
        <div>
          <h2>What<br />We Do</h2>
          <p className="lede">
            From single-tree removals to full-day clearing jobs, we handle the full range of
            residential and commercial tree care across coastal and inland Maine.
          </p>
        </div>
      </div>

      <div className="svc-grid">
        {SERVICES.map((s) => (
          <div className="svc" key={s.n}>
            <div className="svc-num">— {s.n}</div>
            <h3>{s.title}</h3>
            <p>{s.body}</p>
            <a href="#contact" className="svc-arrow">Inquire <span aria-hidden="true">→</span></a>
          </div>
        ))}
      </div>

      <div className="svc-cta">
        <div className="num label-num">— Not on the list?</div>
        <p>Describe what you're dealing with.<br/>We'll figure it out together.</p>
        <a href="#contact" className="btn btn-teal">Get in touch →</a>
      </div>
    </section>
  );
}

/* =====================================================
   SERVICE AREA MAP
====================================================== */
function ServiceAreaMap() {
  return (
    <div className="map-wrap">
      <iframe
        src="https://snazzymaps.com/embed/793903"
        title="Starling Tree service area — Blue Hill Peninsula to Bangor Metro"
        className="map-iframe"
        loading="lazy"
      ></iframe>
      <div className="map-overlay">
        <div>
          <div>Service Area</div>
          <div className="lbl-large">Coast → Bangor</div>
        </div>
        <div style={{ textAlign: "right" }}>
          Blue Hill Peninsula<br/>+ Bangor Metro
        </div>
      </div>
      <div className="map-legend">
        <span className="sw"></span>
        <span>We come here</span>
      </div>
    </div>
  );
}

/* =====================================================
   CONTACT + MAP
====================================================== */
// To activate the contact form, sign up at formspree.io,
// create a form, and replace YOUR_FORM_ID below with your form ID.
const FORMSPREE_ID = "xwvzwblw";

function Contact() {
  const [status, setStatus] = useState("");
  const [fileName, setFileName] = useState("");
  const formRef = useRef(null);

  const submit = async (e) => {
    e.preventDefault();
    setStatus("SENDING…");
    const raw = new FormData(formRef.current);
    // File attachments not supported on current plan — stripped before submit.
    // Customers are prompted to reply with photos after the request goes through.
    const data = new FormData();
    for (const [key, val] of raw.entries()) {
      if (key !== "photo") data.append(key, val);
    }
    try {
      const res = await fetch(`https://formspree.io/f/${FORMSPREE_ID}`, {
        method: "POST",
        body: data,
        headers: { Accept: "application/json" }
      });
      if (res.ok) {
        setStatus("THANKS — WE'LL BE IN TOUCH WITHIN 24 HOURS. REPLY TO OUR EMAIL WITH ANY PHOTOS.");
        formRef.current.reset();
        setFileName("");
      } else {
        setStatus("SOMETHING WENT WRONG — PLEASE CALL OR EMAIL US DIRECTLY");
      }
    } catch {
      setStatus("SOMETHING WENT WRONG — PLEASE CALL OR EMAIL US DIRECTLY");
    }
  };

  return (
    <section className="section section-bg-paper-2" id="contact">
      <div className="section-head">
        <div>
          <div className="num">03 · CONTACT</div>
        </div>
        <div>
          <h2>Get a<br/>Quote</h2>
          <p className="lede">
            Send a few details about the job and we'll get back to you with next steps. For urgent
            storm work, calling is fastest.
          </p>
        </div>
      </div>

      <div className="contact-wrap" id="area">
        <div className="contact-left">
          <form className="quote" ref={formRef} onSubmit={submit}>
            <div className="form-row">
              <label htmlFor="name">Name <span className="req">*</span></label>
              <input id="name" type="text" name="name" required placeholder="Your name" />
            </div>
            <div className="form-row split">
              <div className="form-row">
                <label htmlFor="phone">Phone <span className="req">*</span></label>
                <input id="phone" type="tel" name="phone" required placeholder="(207) ..." />
              </div>
              <div className="form-row">
                <label htmlFor="email">Email <span className="req">*</span></label>
                <input id="email" type="email" name="email" required placeholder="you@example.com" />
              </div>
            </div>
            <div className="form-row">
              <label htmlFor="address">Property Address</label>
              <input id="address" type="text" name="address" placeholder="Street, town" />
            </div>
            <div className="form-row">
              <label htmlFor="message">Describe the Job</label>
              <textarea id="message" name="message" rows="3" placeholder="A big spruce leaning over the garage, half an acre of brush to clear, view-cut along the east side..."></textarea>
            </div>
            <div className="form-row">
              <label>Photo (optional but helpful)</label>
              <div className="file-row">
                <label className="file-pick">
                  Choose file
                  <input type="file" name="photo" accept="image/*" onChange={(e) => setFileName(e.target.files[0]?.name || "")} />
                </label>
                <span>{fileName ? `${fileName} — reply to our confirmation email to send it` : "Snap a phone photo — reply to our confirmation email to send it."}</span>
              </div>
            </div>
            <div className="form-submit-row">
              <button type="submit" className="btn btn-teal">Send Request →</button>
              <span className="form-status">{status}</span>
            </div>
          </form>

          <div className="direct-contact">
            <h4>Prefer to call or text?</h4>
            <a className="row" href="tel:+12076107145">
              <span className="ico">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
              </span>
              (207) 610-7145
            </a>
            <a className="row" href="mailto:hello@starlingtree.com">
              <span className="ico">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
              </span>
              hello@starlingtree.com
            </a>
          </div>
        </div>

        <div className="contact-right">
          <ServiceAreaMap />
        </div>
      </div>
    </section>
  );
}

/* =====================================================
   ABOUT
====================================================== */
function About() {
  return (
    <section className="section" id="about">
      <div className="section-head">
        <div>
          <div className="num">04 · ABOUT</div>
        </div>
        <div>
          <h2>Local, Skilled,<br/>Here to Stay.</h2>
        </div>
      </div>

      <div className="about-wrap">
        <div className="about-img">
          <img src="assets/about.jpg" alt="Starling Tree climbers in a coastal Maine oak" />
          <svg className="tree-overlay" viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
            <g fill="none" stroke="#F4F1EA" strokeWidth="0.8" opacity="0.35" strokeLinecap="round">
              <path d="M60,500 L60,180 M60,180 Q50,150 35,140 M60,180 Q70,150 90,135 M60,230 Q45,220 30,225 M60,260 Q80,250 100,260 M60,310 Q40,300 25,310 M60,340 Q85,330 110,345" />
              <path d="M140,500 L140,140 M140,200 Q120,180 105,180 M140,220 Q165,200 185,200 M140,260 Q115,250 95,260 M140,290 Q170,280 200,295 M140,340 Q120,330 100,345" />
              <path d="M260,500 L260,160 M260,210 Q240,195 220,200 M260,240 Q285,225 310,235 M260,290 Q235,280 215,295 M260,330 Q290,320 320,340" />
              <path d="M345,500 L345,200 M345,250 Q325,235 305,245 M345,290 Q370,275 390,290 M345,340 Q320,330 300,345" />
            </g>
          </svg>
        </div>

        <div className="about-copy">
          <h3>Climbing trees, clearing land, and caring for the coastal Maine canopy since 2022.</h3>
          <p>
            Starling Tree is a professional arborist company based on the Blue Hill Peninsula.
            We do this work the right way — with proper technique, the right equipment, and genuine
            respect for the trees we work with and the properties we're trusted to protect.
          </p>
          <p>
            We're not a national franchise or a private equity rollup. We're local, and we intend
            to stay that way. Our crew is led by Matt, a skilled arborist with deep hands-on
            experience across removal, pruning, cabling, and land clearing. Every job gets his
            direct attention.
          </p>
          <div className="about-stats">
            <div className="stat">
              <div className="num">2022</div>
              <div className="lbl">Established</div>
            </div>
            <div className="stat">
              <div className="num">4</div>
              <div className="lbl">Crew members</div>
            </div>
            <div className="stat">
              <div className="num">50mi</div>
              <div className="lbl">Service radius</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =====================================================
   TESTIMONIALS
====================================================== */
const TESTIMONIALS = [
  {
    quote: "He performed the most graceful take-down of a sixty-foot pine close against a garden fence and garden we didn't want squashed. It was a ballet in the sky — the way he calculated and saw a limb turn in its falling. Swift, responsible, tidy. A gem.",
    who: "Christine Schutt",
    source: "Google"
  },
  {
    quote: "Matt and crew brought all our trees down carefully and safely, landing right where he planned. Our solar panels are really cranking now! He also recommended cutting a big old tree near our driveway that turned out to be totally rotten. We should really keep him on speed dial!",
    who: "Karen Swann",
    source: "Google"
  },
  {
    quote: "His prices are extremely reasonable for the area and he works quickly and efficiently. He's been very responsive every time I've contacted him, and goes the extra distance in courtesy and communication. My pond view has been completely transformed.",
    who: "Dan Nicholas",
    source: "Google"
  },
];

function Testimonials() {
  return (
    <section className="section">
      <div className="section-head">
        <div>
          <div className="num">05 · WORD OF MOUTH</div>
          <div style={{ marginTop: 16, fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)" }}>
            <div>★★★★★ 5.0 · Google (8)</div>
            <div style={{ marginTop: 4 }}>★★★★★ 5.0 · HomeAdvisor (7)</div>
          </div>
        </div>
        <div>
          <h2>From the<br/>Folks We Worked For.</h2>
        </div>
      </div>
      <div className="testi-grid">
        {TESTIMONIALS.map((t, i) => (
          <div className="testi" key={i}>
            <div className="stars">★★★★★</div>
            <blockquote>"{t.quote}"</blockquote>
            <div className="who">— {t.who}</div>
            <div className="where">{t.source}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* =====================================================
   FOOTER
====================================================== */
function Footer() {
  return (
    <footer className="foot">
      <div className="stipple-bg"></div>
      <div className="inner">
        <div className="top">
          <div>
            <h5>Starling Tree · Maine Arborists</h5>
            <p style={{ marginTop: 0, lineHeight: 1.6, fontSize: 14, color: "rgba(244,241,234,0.7)", maxWidth: 280 }}>
              Professional tree removal, pruning, and land clearing on the Blue Hill Peninsula and Metro Bangor area in Maine.
            </p>
          </div>
          <div>
            <h5>Sitemap</h5>
            <a href="#services">Services</a>
            <a href="#area">Service Area</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
          </div>
          <div>
            <h5>Reach Us</h5>
            <a href="tel:+12076107145">(207) 610-7145</a>
            <a href="mailto:hello@starlingtree.com">hello@starlingtree.com</a>
            <span style={{ display: "block", padding: "4px 0", fontSize: 15 }}>Blue Hill, ME 04614</span>
          </div>
          <div>
            <h5>Follow</h5>
            <a href="https://www.instagram.com/starlingtree/" target="_blank" rel="noopener noreferrer">Instagram</a>
            <a href="https://www.facebook.com/profile.php?id=61560509726545" target="_blank" rel="noopener noreferrer">Facebook</a>
            <a href="https://maps.app.goo.gl/ymoAweRf1reWiZNL9" target="_blank" rel="noopener noreferrer">Google Reviews</a>
          </div>
        </div>

        <div className="wordmark-foot">
          STARLING <span className="tree">TREE</span>
        </div>

        <div className="bottom">
          <span>© 2026 Starling Tree. Blue Hill, Maine.</span>
          <span>Licensed and Insured</span>
          <span>Website by <a href="https://flowella.com" target="_blank" rel="noopener noreferrer" style={{ color: "inherit" }}>Flowella</a></span>
        </div>
      </div>
    </footer>
  );
}

/* =====================================================
   APP
====================================================== */
function App() {
  return (
    <React.Fragment>
      <Nav />
      <Hero />
      <Marquee />
      <Services />
      <Contact />
      <About />
      <Testimonials />
      <Footer />
    </React.Fragment>
  );
}

const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);