// Landing page sections

function Topbar() {
  return (
    <div className="topbar">
      <div className="container">
        <div className="left">Est. 2019 · Bench-engraved in Calgary</div>
        <div className="center">Free international shipping · 14-day return</div>
        <div className="right">Lifetime guarantee</div>
      </div>
    </div>
  );
}

function Nav() {
  return (
    <div className="container">
      <nav className="nav">
        <div className="logo">
          <span className="mark"></span>
          <span>Heritage Pet Tags</span>
        </div>
        <div className="links">
          <a href="#preview">The Tag</a>
          <a href="#process">Process</a>
          <a href="#gallery">Gallery</a>
          <a href="#reviews">Reviews</a>
          <a href="#shipping">Shipping</a>
        </div>
        <button className="cart">Cart · 0</button>
      </nav>
    </div>
  );
}

function Hero({ tweaks, onCheckout }) {
  const [name, setName] = React.useState('BARNABY');
  const [phone, setPhone] = React.useState('(415) 555-0119');
  const [breed, setBreed] = React.useState('labrador');
  const [goldPlated, setGoldPlated] = React.useState(false);
  const baseFinish = tweaks.finish;
  const finish = goldPlated ? 'gold' : baseFinish;
  const total = 99 + (goldPlated ? 79 : 0);

  return (
    <section className="hero" id="preview">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="eyebrow">No. 01 — The Classic Round</div>
            <h1>
              The tag<br/>
              your pet<br/>
              will <em>retire&nbsp;in.</em>
            </h1>
            <p className="lede">
              Solid brushed brass, deep-stamped by a single bench engraver in our Portland workshop. Each tag carries your pet's name, your number, and an embossed silhouette — dogs, cats, and the occasional rabbit — chosen to match.
            </p>
            <div className="specs">
              <div className="spec">
                <div className="label">Material</div>
                <div className="value">Solid Brass, 2.4mm</div>
              </div>
              <div className="spec">
                <div className="label">Diameter</div>
                <div className="value">32 millimetres</div>
              </div>
              <div className="spec">
                <div className="label">Engraving</div>
                <div className="value">Hand-pressed, 0.4mm</div>
              </div>
            </div>
          </div>

          <div className="customizer">
            <div className="header">
              <div className="title">Compose Your Tag</div>
              <div className="num">PROOF · {String(Date.now()).slice(-5)}</div>
            </div>

            <div className={`tag-stage ${goldPlated ? 'is-gold' : ''}`}>
              <img
                src="img/heritage-pet-tag-brass.png"
                alt="Solid brass pet tag with hand-engraved name and phone number"
                className="tag-photo"
              />
            </div>

            <div className="field-grid">
              <div className="field full">
                <label htmlFor="petname">Pet's name</label>
                <input
                  id="petname"
                  type="text"
                  value={name}
                  onChange={(e) => setName(e.target.value.slice(0, 14))}
                  maxLength={14}
                  placeholder="BARNABY"
                />
              </div>
              <div className="field">
                <label htmlFor="phone">Phone number</label>
                <input
                  id="phone"
                  type="text"
                  value={phone}
                  onChange={(e) => setPhone(e.target.value.slice(0, 18))}
                  placeholder="(415) 555-0119"
                />
              </div>
              <div className="field">
                <label htmlFor="breed">Pet silhouette</label>
                <select id="breed" value={breed} onChange={(e) => setBreed(e.target.value)}>
                  <optgroup label="Dogs">
                    {BREEDS.filter(b => b.kind === 'dog').map(b => (
                      <option key={b.id} value={b.id}>{b.name}</option>
                    ))}
                  </optgroup>
                  <optgroup label="Cats">
                    {BREEDS.filter(b => b.kind === 'cat').map(b => (
                      <option key={b.id} value={b.id}>{b.name}</option>
                    ))}
                  </optgroup>
                  <optgroup label="Either">
                    {BREEDS.filter(b => b.kind === 'either').map(b => (
                      <option key={b.id} value={b.id}>{b.name}</option>
                    ))}
                  </optgroup>
                </select>
              </div>
              <div className="field full">
                <label>Base finish</label>
                <div className="finish-row">
                  {['brass', 'silver', 'copper'].map(f => (
                    <button
                      key={f}
                      type="button"
                      data-finish={f}
                      className={`finish-swatch ${baseFinish === f ? 'active' : ''} ${goldPlated ? 'dimmed' : ''}`}
                      onClick={() => window.__setFinish && window.__setFinish(f)}
                    >
                      <span className="dot"></span>
                      <span>{f}</span>
                    </button>
                  ))}
                </div>
              </div>
            </div>

            <button
              type="button"
              className={`upgrade ${goldPlated ? 'on' : ''}`}
              onClick={() => setGoldPlated(!goldPlated)}
              aria-pressed={goldPlated}
            >
              <span className="upgrade-dot" aria-hidden="true"></span>
              <span className="upgrade-body">
                <span className="upgrade-head">
                  <span className="upgrade-title">24-Karat Gold Plating</span>
                  <span className="upgrade-tag">Upgrade · +$79</span>
                </span>
                <span className="upgrade-copy">
                  A 0.5-micron layer of solid 24k gold electroplated over the brass base. Resists tarnish; deepens to a soft champagne over years of wear.
                </span>
              </span>
              <span className="upgrade-switch" role="switch" aria-checked={goldPlated}>
                <span className="upgrade-knob"></span>
              </span>
            </button>

            <div className="cta-row">
              <div className="price-block">
                <div className="price">
                  <span>${total}</span>
                  {goldPlated && <span className="price-strike">$99</span>}
                </div>
                <div className="meta">
                  {goldPlated
                    ? 'brass + 24k plating · engraving + split ring'
                    : 'includes engraving + split ring'}
                </div>
              </div>
              <button className="btn-primary" onClick={() => onCheckout({ name, phone, breed, finish: baseFinish, goldPlated, total })}>
                Order this tag
                <span className="arrow"></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Process() {
  return (
    <section className="section" id="process">
      <div className="container">
        <div className="section-head">
          <div className="num">02 / Process</div>
          <h2>Three weeks, <em>three steps,</em> one tag worth waiting for.</h2>
        </div>
        <div className="steps">
          <div className="step">
            <div className="step-num">i.</div>
            <h3>Compose &amp; proof</h3>
            <p>You set the name, your number, and pick the silhouette that matches your pet — dog, cat, or otherwise. We send a digital proof within twenty-four hours for your sign-off.</p>
            <div className="icon-strip">
              <span>Day 01</span>
              <span>Digital Proof</span>
            </div>
          </div>
          <div className="step">
            <div className="step-num">ii.</div>
            <h3>Cut &amp; stamp</h3>
            <p>A solid brass round is cut, deburred, and hand-pressed by a single bench engraver. Each strike is checked under loupe before the silhouette is embossed.</p>
            <div className="icon-strip">
              <span>Day 07–14</span>
              <span>Workshop</span>
            </div>
          </div>
          <div className="step">
            <div className="step-num">iii.</div>
            <h3>Patina &amp; ship</h3>
            <p>The tag is brushed, sealed with a wax patina, and shipped in a numbered cotton pouch with a stainless split ring and a registration card.</p>
            <div className="icon-strip">
              <span>Day 15–21</span>
              <span>Tracked Post</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Gallery() {
  const samples = [
    { name: 'Winston',  breed: 'bulldog',   meta: 'Brass · Brooklyn' },
    { name: 'Juniper',  breed: 'retriever', meta: 'Brass · Asheville' },
    { name: 'Mochi',    breed: 'cat',       meta: 'Silver · Kyoto' },
    { name: 'Sable',    breed: 'shepherd',  meta: 'Brass · Vermont' },
    { name: 'Otto',     breed: 'dachshund', meta: 'Copper · Berlin' },
    { name: 'Felix',    breed: 'tabby',     meta: 'Brass · Lisbon' },
    { name: 'Olive',    breed: 'longhair',  meta: 'Silver · Paris' },
    { name: 'Tuck',     breed: 'labrador',  meta: 'Copper · Halifax' },
  ];
  return (
    <section className="section" id="gallery">
      <div className="container">
        <div className="section-head">
          <div className="num">03 / Ledger</div>
          <h2>A page from the <em>ledger.</em> Tags pressed in the last fortnight.</h2>
        </div>
        <div className="gallery">
          {samples.map((s, i) => {
            const finish = s.meta.split(' · ')[0].toLowerCase();
            return (
              <div className="gallery-item" key={i}>
                <TagPreview name={s.name} phone="" breed={s.breed} finish={finish} size={170} uid={`g${i}`} />
                <div className="caption">
                  <div className="name">{s.name}</div>
                  <div className="meta">{s.meta}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const items = [
    {
      quote: 'My old labrador has lost three tags to the surf in two years. This one came back from a week at the cape looking like it had been dipped in honey. We are converts.',
      who: 'Eleanor M.',
      pet: 'Mosby · Labrador',
    },
    {
      quote: 'Our cat is a notorious escape artist. The old plastic tag rattled so loud we could hear her two rooms away. The brass is quieter, heavier, and somehow she seems prouder of it.',
      who: 'Aiko R.',
      pet: 'Mochi · Shorthair',
    },
    {
      quote: 'The engraving is deep enough that I can read it without my glasses, which, at fifty-eight, I appreciate more than I can say. Worth every dollar of the ninety-nine.',
      who: 'Margaret T.',
      pet: 'Cleo · Shepherd Mix',
    },
  ];
  return (
    <section className="section" id="reviews">
      <div className="container">
        <div className="section-head">
          <div className="num">04 / Field Notes</div>
          <h2>Read by the <em>people</em> they were made for.</h2>
        </div>
        <div className="testimonials">
          {items.map((t, i) => (
            <figure className="testimonial" key={i}>
              <blockquote>{t.quote}</blockquote>
              <figcaption className="attr">
                <span className="avatar"></span>
                <span className="who">
                  {t.who}
                  <span className="pet">{t.pet}</span>
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function Shipping() {
  const cards = [
    {
      g: 'i',
      h: 'Lead Time',
      p: 'Each tag is made to order. Allow fifteen to twenty-one days from approved proof to your door. Rush orders by request.',
    },
    {
      g: 'ii',
      h: 'Domestic Post',
      p: 'Free tracked shipping anywhere in the United States. Most parcels arrive within three working days of dispatch.',
    },
    {
      g: 'iii',
      h: 'International',
      p: 'We ship worldwide via tracked airmail. Flat fee of $12. Duties and import taxes are calculated at checkout where possible.',
    },
    {
      g: 'iv',
      h: 'Returns',
      p: 'Engraving is final, but if your tag is damaged or the engraving wears within twelve months, we replace it. No questions, no receipt needed.',
    },
  ];
  return (
    <section className="section" id="shipping">
      <div className="container">
        <div className="section-head">
          <div className="num">05 / Shipping &amp; Returns</div>
          <h2>The practical <em>particulars.</em></h2>
        </div>
        <div className="shipping-grid">
          {cards.map((c, i) => (
            <div className="ship-card" key={i}>
              <div className="glyph">{c.g}</div>
              <h4>{c.h}</h4>
              <p>{c.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="logo">Heritage Pet Tags</div>
            <div className="blurb">A two-bench workshop on the foothills of Rockies making one thing well: solid brass tags for dogs, cats, and any pet that should be wearing their name.</div>
          </div>
          <div>
            <h5>The Shop</h5>
            <ul>
              <li><a href="#preview">Classic Round</a></li>
              <li><a href="#process">Process</a></li>
              <li><a href="#gallery">Ledger</a></li>
            </ul>
          </div>
          <div>
            <h5>Service</h5>
            <ul>
              <li><a href="#shipping">Shipping</a></li>
              <li><a href="#shipping">Returns</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
          <div>
            <h5>Workshop</h5>
            <ul>
              <li>22 Wharf St.</li>
              <li>Portland, ME 04101</li>
              <li>workshop@benchandbrass.co</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Bench &amp; Brass · All rights reserved</div>
          <div>Bench-stamped, one at a time</div>
        </div>
      </div>
    </footer>
  );
}

function CheckoutModal({ order, onClose, onPay }) {
  if (!order) return null;
  const breedName = (BREEDS.find(b => b.id === order.breed) || {}).name || '—';
  const total = order.total || 99;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h3>Review &amp; pay</h3>
        <div className="modal-sub">Order summary · No. {String(Date.now()).slice(-6)}</div>

        <div className="line-item"><span className="lbl">Classic Round, brushed</span><span>$99.00</span></div>
        <div className="line-item"><span className="lbl">Engraving — "{order.name.toUpperCase()}"</span><span>incl.</span></div>
        <div className="line-item"><span className="lbl">Silhouette — {breedName}</span><span>incl.</span></div>
        <div className="line-item"><span className="lbl">Finish — {order.finish}</span><span>incl.</span></div>
        {order.goldPlated && (
          <div className="line-item gold"><span className="lbl">24k gold plating — 0.5μ</span><span>$79.00</span></div>
        )}
        <div className="line-item"><span className="lbl">Domestic shipping</span><span>free</span></div>

        <div className="total"><span>Total</span><span>${total}.00</span></div>

        <div className="actions">
          <button className="btn-ghost" onClick={onClose}>Keep editing</button>
          <button className="btn-primary" onClick={() => onPay(order)}>
            Pay ${total}.00 with Stripe
            <span className="arrow"></span>
          </button>
        </div>

        <div className="note">
          DEMO MODE — connect a real Stripe Checkout session by replacing the placeholder publishable key &amp; price ID in <span style={{whiteSpace:'nowrap'}}>index.html</span>. Clicking pay currently opens a hosted-checkout simulation in a new tab.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Topbar, Nav, Hero, Process, Gallery, Testimonials, Shipping, Footer, CheckoutModal });