/* Evie's Alterations — page sections (v2) */

function Hero({ onBook }) {
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          <Eyebrow>Boutique alterations &amp; tailoring</Eyebrow>
          <h1>Helping your favorite clothes <em>fit perfectly.</em></h1>
          <p className="lead">Expert alterations, custom fitting, and garment restoration &mdash; done with patience and care in the heart of the Pacific Northwest.</p>
          <div className="actions">
            <button className="btn btn-primary" onClick={onBook}>Book a fitting</button>
            <a className="btn btn-secondary" href="#services">Explore services</a>
          </div>
          <div className="meta">
            <div className="stat"><div className="n">35+</div><div className="l">Years at the bench</div></div>
            <div className="stat"><div className="n">4,000+</div><div className="l">Gowns &amp; garments</div></div>
            <div className="stat"><div className="n">5.0&#9733;</div><div className="l">Across 300+ reviews</div></div>
          </div>
        </div>
        <div className="hero-art">
          <Placeholder className="hero-img" label="hands pinning a hem &middot; natural light, warm tones" />
          <div className="hero-badge">
            <img src={LOGO_MARK} alt="" />
            <span className="t">Tailored<br/>by hand</span>
          </div>
        </div>
      </div>
    </section>
  );
}

const SERVICES = [
  { tag: "Everyday", title: "Hemming & Length", body: "Trousers, skirts, and dresses taken up or let down with an invisible, lasting finish.", price: "From $18", img: "folding a hemmed trouser cuff" },
  { tag: "Specialty", title: "Bridal & Formal", body: "Gowns and formalwear fitted over multiple visits with patience and total care.", price: "Consultation", img: "bustling a wedding gown" },
  { tag: "Fit", title: "Tailoring & Resizing", body: "Jackets, suits, and dresses reshaped through the waist, shoulders, and seams.", price: "From $35", img: "chalk marks on a jacket back" },
  { tag: "Restore", title: "Repairs & Restoration", body: "Zippers, linings, moth holes, and treasured heirlooms brought back to life.", price: "From $12", img: "needle reweaving fabric" },
  { tag: "Men's", title: "Suits & Business Attire", body: "Sleeves, trousers, and waist suppression for a sharp, considered line.", price: "From $25", img: "measuring a suit sleeve" },
  { tag: "Custom", title: "Custom Fitting", body: "Personal fittings to make a garment truly yours, measured by hand.", price: "By appointment", img: "tape measure over shoulder" },
];

function Services() {
  return (
    <section className="section bg-lilac" id="services">
      <div className="container">
        <div className="section-head">
          <Eyebrow>What we do</Eyebrow>
          <h2>Expert alterations, done right.</h2>
          <p>Every garment receives the same care, precision, and craftsmanship that Evie would expect for her own clothes.</p>
        </div>
        <div className="services-grid">
          {SERVICES.map(s => (
            <article className="service-card" key={s.title}>
              <Placeholder label={s.img} />
              <div className="sc-body">
                <p className="eyebrow" style={{ marginBottom: 10 }}><Sparkle size={11} />{s.tag}</p>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
                <span className="price">{s.price}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="section" id="about">
      <div className="container about-grid">
        <div className="about-art">
          <Placeholder className="about-img" label="Evie at the sewing table &middot; portrait" />
        </div>
        <div>
          <Eyebrow>Meet Evie</Eyebrow>
          <h2>Three decades at the bench &mdash; and counting.</h2>
          <p>Evie has been altering, mending, and tailoring clothes for the families of Vancouver since 1989. What began as a single sewing machine in a spare room is now a small, trusted studio known for getting the details exactly right.</p>
          <p>She treats every piece &mdash; whether it&#8217;s a wedding gown or a favorite pair of jeans &mdash; as though it were her own. You&#8217;ll leave feeling confident, comfortable, and cared for.</p>
          <div className="signature">&mdash; Evie</div>
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  { n: "01", t: "Bring it in", d: "Stop by the studio or book a fitting online. No appointment needed for quick jobs." },
  { n: "02", t: "We measure & pin", d: "Evie fits the garment to you and talks through exactly what's possible." },
  { n: "03", t: "Crafted by hand", d: "Your piece is altered with care, with extra fittings for bridal and formalwear." },
  { n: "04", t: "Perfect fit", d: "Pick up a garment that fits the way it was always meant to." },
];

function Process() {
  return (
    <section className="section bg-green">
      <div className="container">
        <div className="section-head">
          <Eyebrow onDark>How it works</Eyebrow>
          <h2>Simple, personal, precise.</h2>
        </div>
        <div className="process-grid">
          {STEPS.map(s => (
            <div className="step" key={s.n}>
              <div className="num-rule"><span className="num">{s.n}</span><span className="ln"></span></div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Gallery() {
  return (
    <section className="section" id="gallery">
      <div className="container">
        <div className="section-head">
          <Eyebrow>The work</Eyebrow>
          <h2>A few favorites from the studio.</h2>
        </div>
        <div className="gallery-grid">
          <Placeholder className="tall" label="finished gown on form" />
          <Placeholder className="wide" label="detail: hand-stitched hem" />
          <Placeholder label="spools & shears" />
          <Placeholder label="pinned waist seam" />
          <Placeholder className="wide" label="before & after — suit jacket" />
          <Placeholder label="fitting in progress" />
        </div>
      </div>
    </section>
  );
}

function Testimonial() {
  return (
    <section className="section bg-lilac" id="reviews">
      <div className="container quote-wrap">
        <Sparkle size={26} />
        <blockquote>Evie took in my mother&#8217;s wedding dress for my own wedding. She treated it like it was priceless &mdash; because to me, it was. It fit like it was made for me.</blockquote>
        <div className="cite">Sarah M. &middot; Camas, WA</div>
      </div>
    </section>
  );
}

function CTABand({ onBook }) {
  return (
    <section className="section bg-plum cta-band">
      <div className="container narrow">
        <Eyebrow onDark>By appointment &amp; walk-in</Eyebrow>
        <h2 style={{ marginTop: 16 }}>Let&#8217;s make it fit.</h2>
        <p>Bring us the pieces you love most. We&#8217;ll take it from here &mdash; with the care your garments deserve.</p>
        <div className="cta-actions">
          <button className="btn btn-light" onClick={onBook}>Book a fitting</button>
          <a className="btn btn-ghost-dark" href="tel:3608184795">Call the studio</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Services, About, Process, Gallery, Testimonial, CTABand });