const { useState, useEffect, useRef } = React;

const ROCKWOOD_TWEAKS = /*EDITMODE-BEGIN*/{
  "heroVariant": "split",
  "showWoodTypes": true,
  "showFAQ": true,
  "showReviews": true,
  "warmth": "cream"
}/*EDITMODE-END*/;

/* ---------- Sections ---------- */

function UtilBar() {
  return (
    <div className="util">
      <div className="wrap util-row">
        <div className="util-left">
          <span className="pulse"></span>
          <span>Open Mon–Sat · 8a–6p · Cutting + delivering today</span>
        </div>
        <div className="util-phones">
          <a href="tel:2108541362"><strong>(210) 854-1362</strong></a>
          <a href="tel:2108626968">(210) 862-6968</a>
        </div>
      </div>
    </div>
  );
}

function Nav() {
  return (
    <nav className="nav" aria-label="Primary">
      <div className="wrap nav-row">
        <a className="brand" href="#home" aria-label="RockWood Supply Co. — Home">
          <img src="assets/logo.png" alt="RockWood Supply Co. logo — beaver mascot driving a firewood pickup" />
          <div className="brand-name">
            <div className="a">RockWood Supply</div>
            <div className="b">Firewood &amp; Delivery · Est. Bulverde, TX</div>
          </div>
        </a>
        <div className="nav-links">
          <a href="#products">Firewood</a>
          <a href="#why">Why Us</a>
          <a href="#coverage">Coverage</a>
          <a href="#faq">FAQ</a>
          <a href="#contact">Contact</a>
        </div>
        <a className="nav-cta" href="#contact">Request Quote →</a>
      </div>
    </nav>
  );
}

function Hero({ variant }) {
  return (
    <header className="hero" id="home">
      <div className="hero-grid">
        <div className="hero-copy">
          <div className="hero-eyebrow">Bulverde, TX · Serving SA &amp; the Hill Country</div>
          <h1>
            <span className="stack">Seasoned</span>
            <span className="stack"><span className="em">Hardwood</span></span>
            <span className="stack">Firewood.</span>
            <span className="small">Delivered or picked up — same week, no excuses.</span>
          </h1>
          <p className="hero-sub">
            Family-run firewood yard supplying San Antonio, Bulverde, Spring Branch, Boerne and the surrounding Hill Country.
            Dry, hot-burning hardwood — bulk bags, full / half / quarter cords, and welded racks built to your space.
          </p>
          <div className="hero-ctas">
            <a className="btn-primary" href="#contact">Get a Quote →</a>
            <a className="btn-ghost" href="tel:2108541362">Call (210) 854-1362</a>
          </div>
        </div>
        <div className="hero-image" role="img" aria-label="Bulk bags of split, seasoned oak firewood staged at the RockWood yard with a tractor loader behind them">
          <div className="hero-spec">
            <div className="label">Standard delivery</div>
            <div className="val">Inside Loop 1604</div>
          </div>
        </div>
      </div>
      <div className="hero-stats" aria-label="Service highlights">
        <div className="hero-stat"><div className="n">6–12<span style={{fontSize:'22px'}}>mo</span></div><div className="l">Seasoned dry</div></div>
        <div className="hero-stat"><div className="n">10<span style={{fontSize:'22px'}}>mi</span></div><div className="l">Outside Loop 1604</div></div>
        <div className="hero-stat"><div className="n">4</div><div className="l">Cord sizes</div></div>
        <div className="hero-stat"><div className="n">2</div><div className="l">Direct lines</div></div>
      </div>
    </header>
  );
}

function Marquee() {
  const items = [
    "Seasoned Hardwood", "Bulk Bags", "Full Cord", "Half Cord", "Quarter Cord",
    "Custom Racks", "Delivery or Pickup", "Same-Week Delivery", "Inside Loop 1604"
  ];
  const row = items.map((t,i)=>(<span key={i}>{t}<i className="dot" /></span>));
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">{row}{row}</div>
    </div>
  );
}

function Products() {
  const items = [
    {
      n: "01", title: "Bulk Firewood Bags", img: "assets/bulk-bags.jpg",
      desc: "Large bulk bags perfect for restaurants, ranches, BBQ pits, and big residential orders. Dropped off the dump trailer right where you want them.",
      specs: ["Dump-trailer drop", "1 yd³ bags", "Commercial volume"],
    },
    {
      n: "02", title: "Stacked Cords", img: "assets/stacked.jpg",
      desc: "Hand-split, seasoned oak — stacked clean and tight. Order full, half, or quarter cord. Delivery inside Loop 1604, or pick up in Bulverde.",
      specs: ["Full · 1/2 · 1/4 cord", "Hand stacked", "Pickup or delivery"],
    },
    {
      n: "03", title: "Custom Welded Racks", img: "assets/stacked.jpg",
      desc: "Steel firewood racks built to fit your patio, hearth, or garage. Tell us the dimensions — we'll fabricate, finish, and deliver.",
      specs: ["Welded steel", "Any size", "Built local"],
    },
  ];
  return (
    <section className="products" id="products" aria-labelledby="products-h">
      <div className="wrap">
        <div className="products-head">
          <div>
            <div className="eyebrow">What We Cut</div>
            <h2 className="section-title" id="products-h">Firewood, Sized to Your Order.</h2>
          </div>
          <p className="section-lead">
            Three ways to buy. Every order is split, seasoned, and loaded by hand.
            Need something we don't list? Call — we've probably done it before.
          </p>
        </div>
        <div className="product-list">
          {items.map(p => (
            <article className="product" key={p.n}>
              <div className="product-img" style={{backgroundImage: `url(${p.img})`}}>
                <div className="product-num">{`Product · ${p.n}`}</div>
              </div>
              <div className="product-body">
                <h3>{p.title}</h3>
                <p>{p.desc}</p>
                <div className="product-specs">
                  {p.specs.map(s => <span key={s}>{s}</span>)}
                </div>
                <div className="product-cta">
                  <a href="#contact">Request Quote</a>
                  <a className="alt" href="tel:2108541362">or call →</a>
                </div>
              </div>
            </article>
          ))}
        </div>

        <div className="cord-explainer">
          <div>
            <div className="eyebrow" style={{color:'var(--tan)'}}>Cord Sizing 101</div>
            <h3>What's actually in a cord?</h3>
            <p>
              A <strong>full cord</strong> is 128 cubic feet of stacked wood — picture a wall 4 ft tall, 4 ft deep, 8 ft long.
              A <strong>half cord</strong> is 64 ft³, a <strong>quarter cord</strong> is 32 ft³.
              Anyone selling a "rick" or "face cord" is selling you 1/3 of a real cord. Ours are measured tight.
            </p>
          </div>
          <div className="cord-diagram" aria-hidden="true">
            <div className="cord-bar full" style={{height:'200px', width:'140px'}}>
              <div className="qty">Full Cord</div><div className="ft">128 ft³</div>
            </div>
            <div className="cord-bar" style={{height:'130px', width:'90px'}}>
              <div className="qty">1/2</div><div className="ft">64 ft³</div>
            </div>
            <div className="cord-bar" style={{height:'80px', width:'60px'}}>
              <div className="qty">1/4</div><div className="ft">32 ft³</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function WhyUs() {
  const items = [
    { t: "Seasoned, Not Green", d: "Hardwood dried 6–12 months before it leaves the yard. Lights on the first match, burns hot and clean." },
    { t: "Measured Tight", d: "A full cord is 128 ft³ — and ours actually is. No 'rick' games, no shorted stacks." },
    { t: "Same-Week Delivery", d: "Most orders go out within the week. Dump-trailer drop placed exactly where you want it." },
    { t: "Family-Run, Local", d: "Cut, split, and loaded by the same crew. Call the number, get a person." },
  ];
  return (
    <section className="wood" id="why" aria-labelledby="why-h">
      <div className="wrap">
        <div className="eyebrow">Why RockWood</div>
        <h2 className="section-title" id="why-h">Dry Wood. Honest Stacks.</h2>
        <p className="section-lead">
          We don't run flavors or specialty species — we run quality. Every order is the same hardwood cut,
          split, and seasoned at our Bulverde yard, then loaded by hand the day it goes out.
        </p>
        <div className="wood-grid">
          {items.map((w,i) => (
            <div className="wood-cell" key={w.t}>
              <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, letterSpacing:'0.22em', opacity:0.6}}>{`0${i+1}`}</div>
              <h4>{w.t}</h4>
              <p>{w.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { n: "01", t: "Call or Quote", d: "Tell us your address and what you're after. We'll quote on the spot." },
    { n: "02", t: "Cut & Split", d: "Hardwood is bucked, split, and stacked to season at our Bulverde yard." },
    { n: "03", t: "Loaded for You", d: "Bulk bags, cords, or racks loaded by hand — measured tight, no shorting." },
    { n: "04", t: "Delivered or Picked Up", d: "Dump-trailer drop inside Loop 1604, or pickup at 4070 FM 1863." },
  ];
  return (
    <section className="process" aria-labelledby="proc-h">
      <div className="wrap">
        <div className="eyebrow" style={{color:'var(--ember)'}}>From Tree to Hearth</div>
        <h2 className="section-title" id="proc-h" style={{color:'var(--cream)'}}>How We Work.</h2>
        <div className="process-grid">
          {steps.map(s => (
            <div className="step" key={s.n}>
              <div className="step-n">{s.n} ──</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Coverage() {
  return (
    <section className="coverage" id="coverage" aria-labelledby="cov-h">
      <div className="wrap">
        <div className="coverage-grid">
          <div>
            <div className="eyebrow">Service Area</div>
            <h2 className="section-title" id="cov-h">Where We Deliver.</h2>
            <p className="section-lead">
              Standard delivery covers the entire San Antonio metro inside Loop 1604.
              Extended delivery reaches up to 10 miles beyond the loop for an additional fee — call to confirm your address.
            </p>
            <div className="zip-grid" aria-label="ZIP codes served">
              {["78163","78070","78260","78258","78259","78261","78230","78231","78232","78248","78249","78266","78006","78015","78154","78108","78256","78250"].map(z => <span key={z}>{z}</span>)}
            </div>
            <div style={{marginTop: 32, display:'flex', gap:12, flexWrap:'wrap'}}>
              <a className="btn-primary" href="#contact">Confirm My Address →</a>
              <a className="btn-ghost" href="tel:2108541362" style={{color:'var(--bark)', borderColor:'var(--line-strong)'}}>Call now</a>
            </div>
          </div>
          <div className="map-card">
            <CoverageMap />
            <div className="map-legend">
              <div className="item"><span className="key std" /> Standard delivery — Inside Loop 1604</div>
              <div className="item"><span className="key ext" /> Extended — Up to 10 mi outside</div>
              <div className="item" style={{marginTop:24}}>
                <strong style={{fontFamily:'Anton, sans-serif', fontSize:24, letterSpacing:'0.02em'}}>Yard:</strong>&nbsp;
                <span style={{opacity:0.85}}>4070 FM 1863, Bulverde, TX</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CoverageMap() {
  // Stylized SVG: inner loop, extended ring, yard pin
  return (
    <svg className="map-svg" viewBox="0 0 600 480" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <pattern id="grid" width="32" height="32" patternUnits="userSpaceOnUse">
          <path d="M 32 0 L 0 0 0 32" fill="none" stroke="rgba(245,235,220,0.06)" strokeWidth="1"/>
        </pattern>
      </defs>
      <rect width="600" height="480" fill="url(#grid)"/>
      {/* Extended */}
      <circle cx="300" cy="280" r="220" fill="#D86A1E" opacity="0.12" />
      <circle cx="300" cy="280" r="220" fill="none" stroke="#D86A1E" strokeOpacity="0.4" strokeDasharray="4 6" />
      {/* Loop 1604 */}
      <circle cx="300" cy="280" r="140" fill="#D86A1E" opacity="0.55" />
      <circle cx="300" cy="280" r="140" fill="none" stroke="#F5EBDC" strokeOpacity="0.35" strokeWidth="1" />
      <text x="300" y="284" textAnchor="middle" fontFamily="Anton, sans-serif" fontSize="22" fill="#F5EBDC" letterSpacing="2">SAN ANTONIO</text>
      <text x="300" y="306" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#F5EBDC" opacity="0.7" letterSpacing="2">LOOP 1604</text>
      {/* Yard pin (Bulverde — north of SA) */}
      <g>
        <circle cx="360" cy="120" r="9" fill="#F5EBDC" />
        <circle cx="360" cy="120" r="5" fill="#D86A1E" />
        <line x1="360" y1="120" x2="360" y2="280" stroke="#F5EBDC" strokeOpacity="0.4" strokeDasharray="3 4" />
        <text x="372" y="118" fontFamily="Anton, sans-serif" fontSize="18" fill="#F5EBDC" letterSpacing="1">BULVERDE</text>
        <text x="372" y="135" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#C8A876" letterSpacing="1.5">YARD · 4070 FM 1863</text>
      </g>
      {/* Surrounding city ticks */}
      {[
        {x:170, y:200, name:"BOERNE"},
        {x:460, y:230, name:"SCHERTZ"},
        {x:240, y:420, name:"STONE OAK"},
        {x:430, y:380, name:"GARDEN RIDGE"},
      ].map(c => (
        <g key={c.name}>
          <circle cx={c.x} cy={c.y} r="3" fill="#C8A876" />
          <text x={c.x + 8} y={c.y + 4} fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#C8A876" letterSpacing="1.5">{c.name}</text>
        </g>
      ))}
    </svg>
  );
}

function Reviews() {
  const r = [
    { stars: "★★★★★", q: "Showed up on time, dumped exactly where I asked, and the wood was bone-dry. Lit on the first match. We'll be back next season.", who: "B. Hartman · Stone Oak" },
    { stars: "★★★★★", q: "Best post oak I've found in SA. Burns clean and consistent — my brisket guests noticed. Loaded a full bag in minutes.", who: "Pitmaster · Schertz BBQ" },
    { stars: "★★★★★", q: "Custom rack came out perfect — exact size for the patio nook. Welded solid. Refilled it with a half cord same trip.", who: "M. Alvarado · Bulverde" },
  ];
  return (
    <section className="reviews" aria-labelledby="rev-h">
      <div className="wrap">
        <div className="eyebrow">Word Around the Yard</div>
        <h2 className="section-title" id="rev-h">Repeat Customers, Cord After Cord.</h2>
        <div className="review-list">
          {r.map((rv,i) => (
            <article className="review" key={i}>
              <div className="stars" aria-label="5 out of 5">{rv.stars}</div>
              <p className="quote">"{rv.q}"</p>
              <div className="who">— {rv.who}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: "What areas do you deliver firewood to?", a: "Standard delivery covers anywhere inside Loop 1604 in San Antonio. Extended delivery is available up to 10 miles outside the loop for an additional fee. We also serve Bulverde, Spring Branch, Garden Ridge, Schertz, Boerne, Stone Oak, and Fair Oaks Ranch." },
    { q: "How much does a cord of firewood cost?", a: "Pricing depends on cord size and delivery distance. Submit a quote request below or call (210) 854-1362 for a same-day price." },
    { q: "Is your firewood seasoned?", a: "Yes. Every order is seasoned dry — typically 6 to 12 months — so it lights easily and burns hot and clean with low smoke. We do not sell green wood." },
    { q: "What is a full cord vs. a half cord?", a: "A full cord is 128 cubic feet of stacked wood (4 ft × 4 ft × 8 ft). A half cord is 64 ft³, a quarter cord is 32 ft³. We measure tight — a 'rick' or 'face cord' from other sellers is usually only a third of a true cord." },
    { q: "Can I pick up firewood myself?", a: "Yes. Self-pickup is welcome at our yard at 4070 FM 1863, Bulverde, TX. Call ahead so we can stage your order." },
    { q: "Do you build custom firewood racks?", a: "Yes — we fabricate welded steel firewood racks to any dimensions to fit patios, garages, hearths, or commercial spaces. Call (210) 854-1362 for sizing and quotes." },
  ];
  return (
    <section className="faq" id="faq" aria-labelledby="faq-h">
      <div className="wrap">
        <div className="eyebrow">Frequently Asked</div>
        <h2 className="section-title" id="faq-h">Real Questions, Real Answers.</h2>
        <div className="faq-list">
          {items.map((f,i) => (
            <details key={i} {...(i===0 ? {open: true} : {})}>
              <summary>{f.q}</summary>
              <p>{f.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ name:'', phone:'', address:'', product:'Full Cord', delivery:'Delivery', notes:'' });
  const onChange = e => setForm({ ...form, [e.target.name]: e.target.value });
  const onSubmit = e => { e.preventDefault(); setSubmitted(true); };

  return (
    <section className="contact" id="contact" aria-labelledby="contact-h">
      <div className="wrap">
        <div className="contact-grid">
          <div>
            <div className="eyebrow" style={{color:'var(--ember)'}}>Get a Quote</div>
            <h2 className="section-title" id="contact-h">Tell Us What You Need.</h2>
            <p className="lead">We answer the phone. Most quotes come back the same day, and most orders go out the same week.</p>

            <div className="info-block">
              <div className="l">Phone</div>
              <div className="v"><a href="tel:2108541362">(210) 854-1362</a></div>
              <div className="v" style={{fontSize:'18px', opacity:0.78, marginTop:4}}><a href="tel:2108626968">(210) 862-6968</a></div>
            </div>
            <div className="info-block">
              <div className="l">Yard Address</div>
              <div className="v" itemProp="address" itemScope itemType="https://schema.org/PostalAddress">
                <span itemProp="streetAddress">4070 FM 1863</span><br/>
                <span itemProp="addressLocality">Bulverde</span>, <span itemProp="addressRegion">TX</span> <span itemProp="postalCode">78163</span>
              </div>
            </div>
            <div className="info-block">
              <div className="l">Hours</div>
              <div className="v" style={{fontSize:'22px'}}>Mon–Sat · 8a–6p</div>
            </div>
          </div>

          <div>
            {submitted ? (
              <div className="form-success">
                Got it — we'll call you back today at {form.phone || 'your number'}.
              </div>
            ) : (
              <form onSubmit={onSubmit}>
                <div className="row-2">
                  <label><span className="lab">Your Name</span><input required name="name" value={form.name} onChange={onChange} placeholder="First Last" /></label>
                  <label><span className="lab">Phone</span><input required type="tel" name="phone" value={form.phone} onChange={onChange} placeholder="(210) 555-0123" /></label>
                </div>
                <label><span className="lab">Delivery Address or City</span><input name="address" value={form.address} onChange={onChange} placeholder="Street, City, ZIP" /></label>
                <div className="row-2">
                  <label><span className="lab">Product Type</span>
                    <select name="product" value={form.product} onChange={onChange}>
                      <option>Bulk Firewood Bag</option>
                      <option>Full Cord</option>
                      <option>Half Cord</option>
                      <option>Quarter Cord</option>
                      <option>Custom Firewood Rack</option>
                      <option>Not sure — talk to me</option>
                    </select>
                  </label>
                  <label><span className="lab">Delivery or Pickup</span>
                    <select name="delivery" value={form.delivery} onChange={onChange}>
                      <option>Delivery</option>
                      <option>Self-Pickup at Yard</option>
                    </select>
                  </label>
                </div>
                <label><span className="lab">Notes (Quantity, Timing, Access)</span><textarea name="notes" value={form.notes} onChange={onChange} placeholder="e.g., Half cord, weekend delivery preferred, gate code 1234"></textarea></label>
                <button className="submit-btn" type="submit">Send Request →</button>
                <div className="form-note">By submitting, you agree we may call or text you about your firewood quote.</div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-col">
            <div className="foot-brand">
              <img src="assets/logo.png" alt="" />
              <div>
                <div className="a">RockWood Supply Co.</div>
                <p>Family-run firewood yard in Bulverde, Texas — supplying San Antonio &amp; the Hill Country since the trees came down.</p>
              </div>
            </div>
          </div>
          <div className="foot-col">
            <h5>Firewood</h5>
            <a href="#products">Bulk Bags</a>
            <a href="#products">Full / Half / Quarter Cord</a>
            <a href="#products">Custom Racks</a>
            <a href="#why">Why Us</a>
          </div>
          <div className="foot-col">
            <h5>Service Area</h5>
            <a href="#coverage">San Antonio</a>
            <a href="#coverage">Bulverde · Spring Branch</a>
            <a href="#coverage">Boerne · Stone Oak</a>
            <a href="#coverage">Schertz · Garden Ridge</a>
          </div>
          <div className="foot-col">
            <h5>Contact</h5>
            <a href="tel:2108541362">(210) 854-1362</a>
            <a href="tel:2108626968">(210) 862-6968</a>
            <p>4070 FM 1863<br/>Bulverde, TX 78163</p>
            <p>Mon–Sat · 8a–6p</p>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© 2024–2026 RockWood Supply Co. · All rights reserved.</div>
          <div>Quality Firewood Delivered or Picked Up · Bulverde, TX</div>
        </div>
      </div>
    </footer>
  );
}

/* ---------- App ---------- */

function App() {
  const [tweaks, setTweak] = useTweaks(ROCKWOOD_TWEAKS);

  // Apply warmth on root
  useEffect(() => {
    const root = document.documentElement;
    if (tweaks.warmth === 'cream') {
      root.style.setProperty('--cream', '#F5EBDC');
      root.style.setProperty('--cream-2', '#EEDFC9');
    } else if (tweaks.warmth === 'paper') {
      root.style.setProperty('--cream', '#FAF6EE');
      root.style.setProperty('--cream-2', '#F1E9D7');
    } else if (tweaks.warmth === 'stone') {
      root.style.setProperty('--cream', '#E8E2D5');
      root.style.setProperty('--cream-2', '#DCD3C0');
    }
  }, [tweaks.warmth]);

  return (
    <>
      <UtilBar />
      <Nav />
      <Hero variant={tweaks.heroVariant} />
      <Marquee />
      <Products />
      {tweaks.showWoodTypes && <WhyUs />}
      <Process />
      <Coverage />
      {tweaks.showReviews && <Reviews />}
      {tweaks.showFAQ && <FAQ />}
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Layout">
          <TweakRadio label="Background warmth" value={tweaks.warmth} onChange={v=>setTweak('warmth', v)} options={[{value:'cream',label:'Cream'},{value:'paper',label:'Paper'},{value:'stone',label:'Stone'}]} />
        </TweakSection>
        <TweakSection title="Sections">
          <TweakToggle label="Show Why Us" value={tweaks.showWoodTypes} onChange={v=>setTweak('showWoodTypes', v)} />
          <TweakToggle label="Show Reviews" value={tweaks.showReviews} onChange={v=>setTweak('showReviews', v)} />
          <TweakToggle label="Show FAQ" value={tweaks.showFAQ} onChange={v=>setTweak('showFAQ', v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);