/* ============================================================
   Section components for John & Nut portfolio
   Hero, How It Works, Live Preview Generator, Portfolio,
   Pricing Calculator, Add-ons, Marquee, Contact, Footer
   ============================================================ */

const { useState, useEffect, useRef } = React;

/* ====== Hero ====== */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <span className="eyebrow">Built in your town · Hosted in your name</span>
            <h1 className="h-display" style={{ marginTop: 18 }}>
              We build your <span className="underline">site<svg viewBox="0 0 200 12" preserveAspectRatio="none"><path d="M2 8 Q 50 2, 100 7 T 198 6" stroke="#B84518" strokeWidth="3.5" fill="none" strokeLinecap="round" /></svg></span>{" "}
              <span className="accent">first</span>.<br />
              You decide if you want it.
            </h1>
            <p className="hero-sub">
              John &amp; Nut design real, working websites for local businesses — on spec.
              You see it live before you spend a dollar. If it's right for you, take it. If not, no awkward call.
            </p>
            <div className="hero-ctas">
              <a href="#work" className="btn btn--orange magnetic">
                See the work <span className="arr">→</span>
              </a>
              <a href="#contact" className="btn btn--ghost magnetic">Pitch me your shop</a>
            </div>
            <div className="hero-meta">
              <div><b>14</b><br />Sites pitched</div>
              <div><b>9</b><br />Local businesses live</div>
              <div><b>72hr</b><br />From idea to demo</div>
              <div><b>$0</b><br />Until you sign</div>
            </div>
          </div>
        </div>
        <span className="hero-tag" style={{ bottom: 40, right: 40, transform: "rotate(-6deg)" }}></span>
      </div>
    </section>);

}

/* ====== How It Works ====== */
function HowItWorks() {
  return (
    <section className="sect" id="how" style={{ paddingTop: 60 }}>
      <div className="wrap">
        <div className="sect-head">
          <div>
            <span className="eyebrow">How it works</span>
            <h2>Three steps, <em>none of them</em> a sales pitch.</h2>
          </div>
          <p>The whole point: prove the site's worth it before we ever talk money. You see it before you buy it.</p>
        </div>
        <div className="steps">
          <div className="step reveal">
            <div className="step-num">01</div>
            <h3>I build it.</h3>
            <p>Pick a local business I think deserves a better site. Spend a week designing and building one — real copy, real images, real working forms.</p>
            <svg className="step-arrow" viewBox="0 0 60 30"><path d="M2 15 Q 30 2, 56 15" stroke="#B84518" strokeWidth="2.5" fill="none" /><path d="M50 9 L 56 15 L 50 21" stroke="#B84518" strokeWidth="2.5" fill="none" /></svg>
          </div>
          <div className="step reveal">
            <div className="step-num">02</div>
            <h3>You see it.</h3>
            <p>Get a link to <span className="hand">[yourshop].johnandnut.com</span> — a fully live preview. Click around, share with staff, run it past your gut.</p>
            <svg className="step-arrow" viewBox="0 0 60 30"><path d="M2 15 Q 30 28, 56 15" stroke="#B84518" strokeWidth="2.5" fill="none" /><path d="M50 9 L 56 15 L 50 21" stroke="#B84518" strokeWidth="2.5" fill="none" /></svg>
          </div>
          <div className="step reveal">
            <div className="step-num">03</div>
            <h3>You own it.</h3>
            <p>Like it? We move it to your domain, hand over the keys, and set up monthly maintenance. Don't like it? Walk away. We'll sleep fine.</p>
          </div>
        </div>
      </div>
    </section>);

}

/* ====== Live Preview Generator ====== */
const LAYOUT_TYPES = [
{ id: "diner", label: "Diner / Restaurant", palette: { bg: "#F4E1B8", ink: "#1F1A14", accent: "#C2410C", soft: "#FFF6E0" } },
{ id: "service", label: "Trades / Services", palette: { bg: "#0E2A47", ink: "#FFFFFF", accent: "#FACC15", soft: "#173F66" } },
{ id: "cafe", label: "Café", palette: { bg: "#FBE9D0", ink: "#3A1F0F", accent: "#EA580C", soft: "#FFF6E8" } },
{ id: "boutique", label: "Boutique / Retail", palette: { bg: "#EDE7DA", ink: "#1F2D1A", accent: "#7C9F4F", soft: "#FAF6EB" } },
{ id: "barber", label: "Barber / Salon", palette: { bg: "#171717", ink: "#F5F5F4", accent: "#E11D48", soft: "#262626" } },
{ id: "wellness", label: "Wellness / Studio", palette: { bg: "#F2EAE0", ink: "#2C2418", accent: "#A1582A", soft: "#FBF6EE" } }];


function LivePreview() {
  const [name, setName] = useState("");
  const [layout, setLayout] = useState("diner");
  const current = LAYOUT_TYPES.find((l) => l.id === layout);
  const slug = (name || "yourshop").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "") || "yourshop";

  return (
    <section className="sect" id="preview">
      <div className="wrap">
        <div className="preview-block">
          <div>
            <span className="eyebrow" style={{ color: "var(--orange)" }}>Live preview generator</span>
            <h2 className="h-display" style={{ marginTop: 14, fontSize: "clamp(36px,5vw,60px)" }}>
              Type your business name. <em className="serif-italic" style={{ color: "var(--orange)" }}>Watch it land.</em>
            </h2>
            <div className="preview-input-label" style={{ marginTop: 24 }}>Business name</div>
            <div className="preview-input-wrap">
              <input
                className="preview-input magnetic"
                value={name}
                onChange={(e) => setName(e.target.value.slice(0, 28))}
                placeholder="e.g. Pete's Hardware"
                spellCheck={false} />
              
            </div>
            <div className="preview-input-label" style={{ marginTop: 18 }}>What kind of business?</div>
            <div className="preview-type-tabs">
              {LAYOUT_TYPES.map((l) =>
              <button key={l.id} className={`tab-chip magnetic ${layout === l.id ? "active" : ""}`} onClick={() => setLayout(l.id)}>
                  {l.label}
                </button>
              )}
            </div>
            <p style={{ fontFamily: "var(--mono)", fontSize: 12, color: "rgba(251,247,238,.55)", marginTop: 24, textTransform: "uppercase", letterSpacing: ".1em" }}>
              ↳ This is roughly what your spec site lands as
            </p>
          </div>
          <div>
            <div className="preview-frame">
              <div className="browser-bar">
                <i></i><i></i><i></i>
                <div className="browser-url">https://{slug}.johnandnut.com</div>
              </div>
              <div style={{ position: "relative", height: "calc(100% - 28px)" }}>
                <MiniSite name={name || "Your Business"} layout={layout} palette={current.palette} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ====== Portfolio ====== */
function Portfolio() {
  return (
    <section className="sect" id="work">
      <div className="wrap">
        <div className="sect-head">
          <div>
            <span className="eyebrow">The work</span>
            <h2>Real shops. <em>Real sites.</em> Live and clickable.</h2>
          </div>
          <p>Every card below is a working site, hosted right now at a subdomain. The owners haven't all signed yet — that's the point.</p>
        </div>
        {/* PORTFOLIO GRID — add new cards in data.js */}
        <div className="portfolio-grid">
          {window.PORTFOLIO.map((item) =>
          <a key={item.slug} className="pcard magnetic" href={`https://${item.slug}.johnandnut.com`} target="_blank" rel="noreferrer">
              <span className="pcard-tag">{item.type.split(" / ")[0]}</span>
              <span className="pcard-live">Live</span>
              <div className="pcard-screen">
                <div className="mini">
                  <MiniSite name={item.name} layout={item.layout} palette={item.palette} />
                </div>
              </div>
              <div className="pcard-meta">
                <div>
                  <h3>{item.name}</h3>
                  <span className="pcard-type">{item.type}</span>
                </div>
                <div className="pcard-arrow">↗</div>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* ====== Marquee ====== */
function Marquee() {
  const items = ["Diners", "Plumbers", "Florists", "Barbers", "Cafés", "Yoga studios", "Bakeries", "Contractors", "Photographers", "Tattoo shops", "Tailors", "Bookstores"];
  const row =
  <span>
      {items.map((it, i) => <React.Fragment key={i}>{it}<span className="dot"></span></React.Fragment>)}
    </span>;

  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">{row}{row}</div>
    </div>);

}

/* ====== Pricing Calculator ====== */
function Pricing() {
  const [tier, setTier] = useState("standard");
  const [picked, setPicked] = useState(new Set());
  const T = window.TIERS.find((t) => t.id === tier);
  const A = window.ADDONS;

  const togglePick = (id) => {
    const s = new Set(picked);
    s.has(id) ? s.delete(id) : s.add(id);
    setPicked(s);
  };

  const addonsBuild = A.filter((a) => picked.has(a.id)).reduce((s, a) => s + (a.priceN || 0), 0);
  const addonsMonthly = A.filter((a) => picked.has(a.id)).reduce((s, a) => s + (a.monthlyN || 0), 0);
  const totalBuild = T.base + addonsBuild;
  const totalMonthly = T.monthlyN + addonsMonthly;

  return (
    <section className="sect" id="pricing">
      <div className="wrap">
        <div className="sect-head">
          <div>
            <span className="eyebrow">Pricing — pick &amp; mix</span>
            <h2>Plain numbers. <em>No retainer trap.</em></h2>
          </div>
          <p>Pick a tier, add what you need, see the total. Build cost is one-time. Monthly covers hosting, updates, backups.</p>
        </div>
        <div className="pricing-shell">
          <div>
            <div className="tier-row">
              {window.TIERS.map((t) =>
              <button key={t.id} className={`magnetic ${tier === t.id ? "active" : ""}`} onClick={() => setTier(t.id)}>
                  {t.name}
                </button>
              )}
            </div>
            <div className="tier-detail">
              <h3>{T.name}</h3>
              <div className="tier-price">
                <span className="num">{T.price}</span>
                <span className="unit">{T.range} build</span>
              </div>
              <div className="tier-monthly">+ {T.monthly}</div>
              <p style={{ margin: "6px 0 22px", color: "var(--ink-soft)", maxWidth: 480 }}>{T.desc}</p>
              <ul className="tier-features">
                {T.features.map((f) => <li key={f}>{f}</li>)}
              </ul>
            </div>
          </div>
          <div className="calc-side">
            <h4>Bolt on extras</h4>
            <div className="calc-list">
              {A.map((a) =>
              <div key={a.id} className={`calc-item magnetic ${picked.has(a.id) ? "active" : ""}`} onClick={() => togglePick(a.id)}>
                  <div>
                    <div className="name">{a.name}</div>
                    <div className="price">{a.price}</div>
                  </div>
                  <div className="check">{picked.has(a.id) ? "✓" : ""}</div>
                </div>
              )}
            </div>
            <div className="calc-total">
              <div className="calc-total-row">
                <span>Build (one-time)</span>
                <span>~ ${totalBuild.toLocaleString()}</span>
              </div>
              <div className="calc-total-row">
                <span>Monthly</span>
                <span>~ ${totalMonthly}/mo</span>
              </div>
              <div className="calc-total-row big">
                <span>Year one est.</span>
                <span className="v">${(totalBuild + totalMonthly * 12).toLocaleString()}</span>
              </div>
              <a href="#contact" className="btn btn--orange magnetic" style={{ marginTop: 18, width: "100%", justifyContent: "center" }}>
                Get a real quote <span className="arr">→</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ====== Add-ons grid ====== */
function AddonsGrid() {
  return (
    <section className="sect" id="addons" style={{ paddingTop: 40 }}>
      <div className="wrap">
        <div className="sect-head">
          <div>
            <span className="eyebrow">Modular add-ons</span>
            <h2>Bolt on the bits <em>you actually need.</em></h2>
          </div>
          <p>Every add-on plays nice with any tier. Skip the ones you don't. Add more later.</p>
        </div>
        <div className="addons-grid">
          {window.ADDONS.map((a) =>
          <div key={a.id} className="addon magnetic">
              <div className="addon-icon">{a.icon}</div>
              <h4>{a.name}</h4>
              <p>{a.desc}</p>
              <div className="addon-price">{a.price}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ====== Contact ====== */
function Contact() {
  const [sent, setSent] = useState(false);
  return (
    <section className="sect" id="contact">
      <div className="wrap">
        <div className="contact-shell">
          <div>
            <span className="eyebrow" style={{ color: "var(--orange)" }}>Pitch us your shop</span>
            <h2 className="h-display" style={{ marginTop: 14, fontSize: "clamp(40px,5vw,68px)" }}>
              Tell us about <em className="serif-italic" style={{ color: "var(--orange)" }}>your place.</em>
            </h2>
            <p style={{ color: "rgba(251,247,238,.7)", maxWidth: 380, marginTop: 14 }}>
              Or — point us at a local business that deserves a better site. We'll build it on spec and split the upside if they sign.
            </p>
            {/* Replace action with your Formspree / Netlify endpoint */}
            <form className="form" style={{ marginTop: 24 }} onSubmit={(e) => {e.preventDefault();setSent(true);}}>
              <div className="field"><label>Your name</label><input required name="name" placeholder="John Doe" /></div>
              <div className="field"><label>Business</label><input required name="business" placeholder="Pete's Hardware" /></div>
              <div className="field"><label>Email</label><input required type="email" name="email" placeholder="you@business.com" /></div>
              <div className="field"><label>What's the site for?</label><textarea name="msg" placeholder="Brand new? Replacing something old? Just curious?" /></div>
              <button className="btn btn--orange magnetic" type="submit" style={{ justifyContent: "center", marginTop: 8 }}>
                {sent ? "Got it — talk soon ✓" : <>Send it over <span className="arr">→</span></>}
              </button>
            </form>
          </div>
          <div className="contact-side">
            <div className="hand" style={{ fontSize: 32, color: "var(--orange)", transform: "rotate(-3deg)", display: "inline-block" }}>
              we reply same day, promise
            </div>
            <ul>
              <li><b>Email</b> hello@johnandnut.com</li>
              <li><b>Phone</b> (555) 010-2255</li>
              <li><b>Studio</b> Built in California · pitching nationwide</li>
              <li><b>Hours</b> Mon–Fri, 9–5 + most evenings</li>
            </ul>
          </div>
        </div>
      </div>
    </section>);

}

/* ====== Footer ====== */
function Footer() {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-top">
          <h2 className="foot-tag">
            Build it <em>first.</em><br />Sell it <em>second.</em>
          </h2>
          <a href="#contact" className="btn btn--orange magnetic">Let's build yours <span className="arr">→</span></a>
        </div>
        <div className="foot-bottom">
          <span>© 2026 John Cerdon &amp; Nut Suwanchote</span>
          <span>johnandnut.com</span>
          <span>Made in California, hosted on the open web</span>
        </div>
      </div>
    </footer>);

}

window.Hero = Hero;
window.HowItWorks = HowItWorks;
window.LivePreview = LivePreview;
window.Portfolio = Portfolio;
window.Marquee = Marquee;
window.Pricing = Pricing;
window.AddonsGrid = AddonsGrid;
window.Contact = Contact;
window.Footer = Footer;