/* Timeless Totes — supporting pages */
const { useState } = React;

function PageHero({ eyebrow, title, lede, children }) {
  return (
    <section style={{ borderBottom: '1px solid var(--line)', padding: 'clamp(26px,4vw,44px) 0', background: 'var(--bone)' }}>
      <div className="wrap-narrow">
        <nav style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '.88rem', color: 'var(--ink-faint)', marginBottom: 14, flexWrap: 'wrap' }}>
          <a href="#/" style={{ color: 'var(--ink-soft)', whiteSpace: 'nowrap' }}>Home</a>
          <span>/</span>
          <span style={{ color: 'var(--ink)', fontWeight: 600, whiteSpace: 'nowrap' }}>{eyebrow}</span>
        </nav>
        <h1 style={{ fontSize: 'clamp(2rem,3.4vw,2.8rem)', maxWidth: 760 }}>{title}</h1>
        {lede && <p style={{ fontSize: '1.08rem', color: 'var(--ink-soft)', maxWidth: 620, marginTop: 16, lineHeight: 1.55 }}>{lede}</p>}
        {children}
      </div>
    </section>
  );
}

/* ---------------- How It Works ---------------- */
function HowItWorksPage({ ctx }) {
  const steps = [
    { icon: 'ruler', t: 'Choose a product or custom size', d: 'Browse our catalog of clear-vinyl totes and project bags, or request a fully custom size built to your spec. Not sure what fits? A specialist can help you choose.', list: ['Browse available bag styles', 'Or request custom dimensions', 'Add multiple products to one quote'] },
    { icon: 'upload', t: 'Upload your artwork or logo', d: 'Send us your design. Vector files give the crispest silkscreen, but we accept PNG for review and can advise if a file needs work.', list: ['Vector preferred (.ai .eps .pdf .svg)', 'PNG accepted for review', 'No file yet? Send it later'] },
    { icon: 'palette', t: 'Select your specifications', d: 'Choose quantity, size, ink colors, zipper and trim options, print placement, and timing. Our live estimate updates as you go.', list: ['1–4 color silkscreen', 'Zipper & trim options', 'Pantone / hex color matching'] },
    { icon: 'check', t: 'Approve your quote & proof', d: 'We review everything, prepare a digital proof, and send a confirmed quote. Nothing prints — and you pay nothing — until you approve.', list: ['Digital proof for sign-off', 'Confirmed final quote', 'Payment only after approval'] },
  ];
  return (
    <main>
      <PageHero eyebrow="How It Works" title="Custom clear totes, without the guesswork" lede="First time ordering custom? Here's exactly what to expect — from the details you'll need to the proof you'll approve before anything is printed." >
        <div style={{ display: 'flex', gap: 12, marginTop: 26, flexWrap: 'wrap' }}>
          <button className="btn btn-primary" onClick={() => ctx.navigate('#/quote')}>Start a Quote <Icon name="arrow" size={16} className="arr" /></button>
          <button className="btn btn-ghost" onClick={() => ctx.navigate('#/artwork')}>Artwork guidelines</button>
        </div>
      </PageHero>

      <section className="section-sm">
        <div className="wrap-narrow">
          <div className="card" style={{ padding: 'clamp(22px,3vw,32px)', display: 'flex', gap: 20, alignItems: 'flex-start', flexWrap: 'wrap' }}>
            <span style={{ width: 48, height: 48, borderRadius: 12, background: 'var(--teal-tint)', color: 'var(--teal-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="spark" size={23} /></span>
            <div style={{ flex: 1, minWidth: 240 }}>
              <h3 style={{ fontSize: '1.2rem', marginBottom: 10 }}>Before you start, it helps to have…</h3>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 10px' }}>
                {['Your logo / artwork', 'Rough quantity', 'Ink colors', 'A target date', 'Shipping ZIP'].map(t => <span key={t} className="chip">{t}</span>)}
              </div>
              <p style={{ margin: '14px 0 0', fontSize: '.92rem', color: 'var(--ink-soft)' }}>Don't have it all? That's fine — start anyway and we'll fill the gaps together.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap-narrow">
          {steps.map((s, i) => (
            <div key={s.t} className="how-step" style={{ display: 'grid', gridTemplateColumns: '64px 1fr', gap: 26, paddingBottom: i < 3 ? 44 : 0, marginBottom: i < 3 ? 44 : 0, borderBottom: i < 3 ? '1px solid var(--line)' : 'none' }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 56, height: 56, borderRadius: 15, background: 'var(--navy)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={s.icon} size={26} /></span>
              </div>
              <div>
                <h2 style={{ fontSize: '1.6rem', marginBottom: 10 }}>{s.t}</h2>
                <p style={{ color: 'var(--ink-soft)', marginBottom: 16, maxWidth: 560 }}>{s.d}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                  {s.list.map(l => <span key={l} style={{ display: 'flex', gap: 8, fontSize: '.9rem', color: 'var(--ink)', alignItems: 'center', background: 'var(--cream)', padding: '8px 13px', borderRadius: 100, border: '1px solid var(--line)' }}><Icon name="check" size={15} style={{ color: 'var(--forest)' }} /> {l}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="section-sm" style={{ background: 'var(--cream)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="wrap-narrow">
          <h2 style={{ fontSize: 'clamp(1.6rem,2.6vw,2.1rem)', marginBottom: 12 }}>After you approve your quote</h2>
          <p style={{ color: 'var(--ink-soft)', fontSize: '1.05rem', maxWidth: 560, marginBottom: 30 }}>Here's what happens once you've reviewed and signed off on your proof and final quote.</p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 20 }}>
            {[
              { icon: 'palette', t: 'Digital proof prepared', d: 'Our team creates a proof showing your artwork on the bag, sized and placed for your approval.' },
              { icon: 'shield', t: 'Final quote confirmed in writing', d: 'The price is locked and sent in writing before any production begins. No surprises at delivery.' },
              { icon: 'mail', t: 'Invoice after approval', d: 'You receive a payment invoice only after approving the proof and final quote — never before.' },
              { icon: 'truck', t: 'Production begins on sign-off', d: 'Once you confirm, your bags go into production. Standard lead time is 6–8 weeks from approval.' },
            ].map(s => (
              <div key={s.t} style={{ display: 'flex', gap: 14, padding: '18px 20px', background: 'var(--white)', borderRadius: 'var(--r-md)', border: '1px solid var(--line)' }}>
                <span style={{ width: 42, height: 42, borderRadius: 11, background: 'var(--navy)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={s.icon} size={21} /></span>
                <div><h3 style={{ fontSize: '1.08rem', marginBottom: 6 }}>{s.t}</h3><p style={{ margin: 0, fontSize: '.95rem', color: 'var(--ink-soft)' }}>{s.d}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--navy)', color: '#fff' }}>
        <div className="wrap-narrow center">
          <h2 style={{ color: '#fff', marginBottom: 16 }}>That's it — ready to start?</h2>
          <p style={{ color: 'rgba(255,255,255,.8)', fontSize: '1.1rem', marginBottom: 30 }}>Most quotes take under five minutes. No payment until you approve your proof.</p>
          <button className="btn btn-accent btn-lg" onClick={() => ctx.navigate('#/quote')}>Start a Quote <Icon name="arrow" size={18} className="arr" /></button>
        </div>
      </section>
    </main>
  );
}

/* ---------------- Wholesale / B2B ---------------- */
function WholesalePage({ ctx }) {
  return (
    <main>
      <PageHero eyebrow="Wholesale / B2B" title="A custom-bag partner built for volume" lede="Retailers, needlepoint and quilt shops, craft brands, and event buyers trust Timeless Totes for branded clear-vinyl bags — from first order to ongoing reorders.">
        <div style={{ display: 'flex', gap: 12, marginTop: 26, flexWrap: 'wrap' }}>
          <button className="btn btn-primary" onClick={() => ctx.navigate('#/quote')}>Request a wholesale quote <Icon name="arrow" size={16} className="arr" /></button>
          <button className="btn btn-ghost" onClick={() => ctx.navigate('#/contact')}>Talk to a specialist</button>
        </div>
      </PageHero>

      <section className="section">
        <div className="wrap">
          <div className="custom-grid" style={{ display: 'grid', gridTemplateColumns: '.9fr 1.1fr', gap: 56, alignItems: 'start' }}>
            <div>
              <SectionHead title="Built for shops and brands that reorder" lede="Artwork and specs go on file after your first order. Reorders are fast, consistent, and confirmed in writing every time." />
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 32 }}>
                {['Needlepoint shops', 'Quilt & fabric retailers', 'Craft & hobby brands', 'Event buyers', 'Wholesale distributors'].map(t => (
                  <span key={t} className="chip" style={{ fontSize: '.85rem' }}>{t}</span>
                ))}
              </div>
              <button className="btn btn-primary" onClick={() => ctx.navigate('#/quote')}>Start a wholesale quote <Icon name="arrow" size={16} className="arr" /></button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {[
                { icon: 'truck', t: 'Volume pricing', d: 'Better per-unit pricing as quantities grow. We structure a quote around your run size.' },
                { icon: 'palette', t: 'Consistent branding', d: 'Your logo, colors, and finish reproduced reliably order after order.' },
                { icon: 'layers', t: 'Easy reorders', d: 'Approved artwork and specs on file make repeat runs fast and predictable.' },
                { icon: 'flag', t: 'American-made', d: 'Domestic manufacturing means tighter communication and dependable timelines.' },
                { icon: 'shield', t: 'Proof before production', d: 'Every order is confirmed with a digital proof — no surprises at delivery.' },
                { icon: 'phone', t: 'A real team', d: 'Family-owned and responsive. Talk to the same people who make your bags.' },
              ].map((o, i, arr) => (
                <div key={o.t} style={{ display: 'flex', gap: 16, padding: '15px 0', borderBottom: i < arr.length - 1 ? '1px solid var(--line-soft)' : 'none', alignItems: 'flex-start' }}>
                  <span style={{ color: 'var(--navy-300)', flexShrink: 0, marginTop: 3 }}><Icon name={o.icon} size={20} /></span>
                  <div>
                    <strong style={{ fontSize: '1rem', display: 'block', marginBottom: 3, color: 'var(--ink)' }}>{o.t}</strong>
                    <span style={{ fontSize: '.9rem', color: 'var(--ink-soft)', lineHeight: 1.45 }}>{o.d}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section-sm" style={{ background: 'var(--cream)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="wrap-narrow" style={{ textAlign: 'center' }}>
          <p style={{ fontSize: '.88rem', fontWeight: 600, color: 'var(--ink-soft)', marginBottom: 20 }}>Trusted by shops and brands across the US</p>
          <div className="logo-row" style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '12px 32px' }}>
            {CLIENT_LOGOS.map(n => <div key={n} style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: '1.2rem', color: 'var(--navy-300)' }}>{n}</div>)}
          </div>
        </div>
      </section>

      <PricingBlock ctx={ctx} />
    </main>
  );
}

/* ---------------- Pricing transparency block ---------------- */
function PricingBlock({ ctx }) {
  return (
    <section className="section">
      <div className="wrap-narrow">
        <SectionHead eyebrow="Transparent pricing" title="How custom pricing works" lede="Custom orders depend on artwork, size, and quantity — so final pricing is always confirmed on your quote. Here's the structure behind it." />
        <div className="card" style={{ overflow: 'hidden' }}>
          <div style={{ padding: '20px 26px', background: 'var(--navy)', color: '#fff', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <strong style={{ fontFamily: 'var(--serif)', fontSize: '1.2rem', fontWeight: 500 }}>Setup / screen fees</strong>
            <span className="chip" style={{ background: 'rgba(255,255,255,.12)', color: '#fff', borderColor: 'transparent' }}>Placeholder — confirmed on quote</span>
          </div>
          {[['1 color · 1 size', '$100 setup'], ['2 colors · 1 size', '$150 setup'], ['3 colors · 1 size', '$200 setup'], ['Each additional print size', '+ separate screen / setup'], ['Custom size', 'Custom-size fee applies'], ['Rush / front-of-line', 'Additional fee'], ['Per-tote labor / upcharge', 'Quoted by product & quantity']].map(([l, v], i) => (
            <div key={l} style={{ display: 'flex', justifyContent: 'space-between', padding: '15px 26px', borderTop: '1px solid var(--line-soft)', background: i % 2 ? 'var(--cream)' : '#fff' }}>
              <span style={{ fontWeight: 600 }}>{l}</span>
              <span className="mono" style={{ color: 'var(--teal-600)', fontSize: '.9rem' }}>{v}</span>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between' }}>
          <p style={{ margin: 0, fontSize: '.86rem', color: 'var(--ink-faint)', display: 'flex', gap: 8, maxWidth: 440 }}><Icon name="shield" size={16} style={{ color: 'var(--teal)', flexShrink: 0 }} /> Estimate only. Final quote is confirmed after artwork and production review.</p>
          <button className="btn btn-primary" onClick={() => ctx.navigate('#/quote')}>Get your estimate <Icon name="arrow" size={16} className="arr" /></button>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Artwork Guidelines ---------------- */
function ArtworkPage({ ctx }) {
  return (
    <main>
      <PageHero eyebrow="Artwork & Proofs" title="Upload your artwork — we review before printing" lede="Every file goes through our artwork partner before quoting or production. Vector files give the cleanest result — PNG/JPG accepted with a note on prep.">
        <div style={{display:"flex",gap:14,marginTop:26,flexWrap:"wrap",alignItems:"center"}}>
          <button className="btn btn-primary btn-lg" onClick={() => ctx.navigate("#/quote")}>Upload Artwork &amp; Start a Quote <Icon name="arrow" size={16} className="arr" /></button>
          <button className="btn btn-ghost btn-lg" onClick={() => ctx.navigate("#/design-lab")}><Icon name="pencil" size={16} /> Preview it in the Design Lab</button>
          <div style={{display:"flex",flexWrap:"wrap",gap:8,marginTop:4}}>
            {[".ai .eps .pdf .svg preferred","We proof every file","No payment until approval"].map(t => (
              <span key={t} className="chip" style={{fontSize:".8rem"}}><Icon name="check" size={12} style={{color:"var(--forest)"}} /> {t}</span>
            ))}
            <p style={{fontSize:".82rem",color:"var(--ink-soft)",margin:"10px 0 0",maxWidth:520,lineHeight:1.55}}>
              Vector artwork is preferred for the cleanest print result. PNG/JPG files can be submitted, but may require file cleanup or conversion before production. If cleanup is needed, artwork prep typically ranges from $25–$50 depending on complexity.
            </p>
          </div>
        </div>
      </PageHero>
      <section className="section">
        <div className="wrap">
          <div className="art-grid" style={{ display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 48, alignItems: 'start' }}>
            <div>
              {[
                { icon: 'upload', t: 'File formats', d: 'Vector files (.ai, .eps, .pdf, .svg) are strongly preferred — they scale to any print size with crisp edges. High-resolution PNG is accepted for review.' },
                { icon: 'palette', t: 'Colors & ink', d: 'Provide Pantone (PMS) or hex values if you need specific colors matched. Tell us how many ink colors are in the design — standard silkscreen supports 1–4.' },
                { icon: 'ruler', t: 'Size & placement', d: 'Let us know how large the artwork should print and where it should appear on the bag (centered front, pocket, side, wrap).' },
                { icon: 'check', t: 'Review & proof', d: "Our team reviews every file and prepares a digital proof. We'll flag anything that should be adjusted for the best result — before production begins." },
              ].map((s, i) => (
                <div key={s.t} style={{ display: 'flex', gap: 18, paddingBottom: i < 3 ? 26 : 0, marginBottom: i < 3 ? 26 : 0, borderBottom: i < 3 ? '1px solid var(--line)' : 'none' }}>
                  <span style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--navy)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={s.icon} size={20} /></span>
                  <div><h3 style={{ fontSize: '1.2rem', marginBottom: 7 }}>{s.t}</h3><p style={{ margin: 0, color: 'var(--ink-soft)' }}>{s.d}</p></div>
                </div>
              ))}
            </div>
            <div style={{ position: 'sticky', top: 96 }}>
              <div className="card" style={{ padding: 26 }}>
                <h3 style={{ fontSize: '1.15rem', marginBottom: 16 }}>Quick checklist</h3>
                {['Vector file ready (or hi-res PNG)', 'Number of ink colors known', 'Pantone / hex colors noted', 'Desired print size', 'Print placement decided'].map(t => (
                  <label key={t} style={{ display: 'flex', gap: 11, padding: '9px 0', fontSize: '.93rem', alignItems: 'center', color: 'var(--ink-soft)' }}>
                    <span style={{ width: 20, height: 20, borderRadius: 6, border: '1.5px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--forest)' }}><Icon name="check" size={13} /></span> {t}
                  </label>
                ))}
                <div style={{ marginTop: 16, padding: 16, background: 'var(--cream)', borderRadius: 12 }}>
                  <p style={{ margin: 0, fontSize: '.86rem', color: 'var(--ink-soft)' }}>No design yet, or need a file recreated? Mention it in your quote — our long-time artwork partner can help.</p>
                </div>
                <button className="btn btn-primary btn-block" style={{ marginTop: 18 }} onClick={() => ctx.navigate('#/quote')}>Upload & start a quote <Icon name="arrow" size={16} className="arr" /></button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ---------------- Quality / Made in USA ---------------- */
function QualityPage({ ctx }) {
  return (
    <main>
      <PageHero eyebrow="Quality · Made in USA" title="Built to last, made close to home" lede="For more than 30 years, every bag we've shipped has come from the same approach: buy materials worth buying, work with people who know what they're doing, and take the time to get it right." />

      {/* Artwork partner: Mary / Fullservice Graphics */}
      <section className="section" style={{ borderBottom: '1px solid var(--line)' }}>
        <div className="wrap">
          <div className="quality-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 52, alignItems: 'start' }}>
            <div>
              <p style={{ fontSize: '.8rem', fontWeight: 700, letterSpacing: '.13em', textTransform: 'uppercase', color: 'var(--pink-600)', marginBottom: 16 }}>Artwork partner</p>
              <h2 style={{ fontSize: 'clamp(1.6rem,2.4vw,2.1rem)', marginBottom: 22, lineHeight: 1.2 }}>Every file goes through trusted hands</h2>
              <p style={{ color: 'var(--ink-soft)', lineHeight: 1.75, marginBottom: 18, fontSize: '1.02rem' }}>
                Every artwork file that comes through Timeless Totes goes through Mary at Fullservice Graphics, a local family business right here in Santa Ana. That relationship is close to 30 years old. Mary has worked on virtually every piece of needlepoint artwork we've produced. She knows the patterns, the printing quirks, and what customers actually expect to see when their design lands on a clear tote.
              </p>
              <p style={{ color: 'var(--ink-soft)', lineHeight: 1.75, marginBottom: 28, fontSize: '1.02rem' }}>
                If a file needs adjusting before it can go to screen, she handles it. She's also exploring AI-assisted preview tools that would let customers see exactly how their artwork will look on a finished bag before anything prints.
              </p>
              <div style={{ background: 'var(--cream)', borderRadius: 'var(--r-md)', border: '1px solid var(--line)', padding: '18px 22px', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <span style={{ flexShrink: 0, marginTop: 3 }}><Flower size={20} color="var(--pink)" hole="var(--cream)" /></span>
                <p style={{ margin: 0, fontSize: '.93rem', color: 'var(--ink-soft)', lineHeight: 1.65 }}>
                  <strong style={{ color: 'var(--ink)', display: 'block', marginBottom: 4 }}>Mary, Fullservice Graphics — Santa Ana, CA</strong>
                  Nearly 30 years working with Timeless Totes. Every needlepoint. Every proof. Every file.
                </p>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Mock label="Mary at Fullservice Graphics" sub="Artwork partner — Santa Ana, CA" icon="camera" accent="pink" tone="tint" style={{ aspectRatio: '4/3', borderRadius: 'var(--r-lg)' }} />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Mock label="Proofing station" sub="Artwork file under review" icon="image" accent="navy" tone="neutral" style={{ aspectRatio: '4/3', borderRadius: 'var(--r-md)' }} />
                <Mock label="Needlepoint artwork proof" sub="Vector file on screen" icon="image" accent="navy" tone="neutral" style={{ aspectRatio: '4/3', borderRadius: 'var(--r-md)' }} />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Materials: coated fabrics / vinyl from Commerce CA */}
      <section className="section" style={{ background: 'var(--cream)', borderBottom: '1px solid var(--line)' }}>
        <div className="wrap">
          <div className="quality-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 52, alignItems: 'center' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Mock label="Clear vinyl rolls" sub="Coated Fabrics — Commerce, CA" icon="camera" accent="navy" tone="neutral" style={{ aspectRatio: '3/2', borderRadius: 'var(--r-lg)' }} />
              <Mock label="Vinyl close-up" sub="Material weight and clarity detail" icon="camera" accent="navy" tone="neutral" style={{ aspectRatio: '5/2', borderRadius: 'var(--r-md)' }} />
            </div>
            <div>
              <p style={{ fontSize: '.8rem', fontWeight: 700, letterSpacing: '.13em', textTransform: 'uppercase', color: 'var(--pink-600)', marginBottom: 16 }}>Materials</p>
              <h2 style={{ fontSize: 'clamp(1.6rem,2.4vw,2.1rem)', marginBottom: 22, lineHeight: 1.2 }}>Vinyl chosen for quality, not cost</h2>
              <p style={{ color: 'var(--ink-soft)', lineHeight: 1.75, marginBottom: 18, fontSize: '1.02rem' }}>
                The vinyl we use isn't chosen because it's the cheapest option. We source our coated fabrics through Coated Fabrics, a supplier based in Commerce, California, and that relationship has been built carefully over time. The weight and clarity of the vinyl affects how the finished bag looks, how well it holds up to daily use, and how cleanly the silkscreen adheres.
              </p>
              <p style={{ color: 'var(--ink-soft)', lineHeight: 1.75, fontSize: '1.02rem' }}>
                We've stayed with Coated Fabrics because consistent materials produce consistent bags. When a customer reorders six months later, the vinyl should feel the same as the first run.
              </p>
              <div style={{ background: 'var(--bone)', borderRadius: 'var(--r-md)', border: '1px solid var(--line)', padding: '18px 22px', display: 'flex', gap: 14, alignItems: 'flex-start', marginTop: 24 }}>
                <span style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--navy)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="flag" size={18} /></span>
                <p style={{ margin: 0, fontSize: '.93rem', color: 'var(--ink-soft)', lineHeight: 1.65 }}>
                  <strong style={{ color: 'var(--ink)', display: 'block', marginBottom: 4 }}>Coated Fabrics — Commerce, CA</strong>
                  Our vinyl source. A trusted domestic supplier relationship built over years.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Components: zippers, trim, Kit Keepers */}
      <section className="section" style={{ borderBottom: '1px solid var(--line)' }}>
        <div className="wrap">
          <div className="quality-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 52, alignItems: 'start' }}>
            <div>
              <p style={{ fontSize: '.8rem', fontWeight: 700, letterSpacing: '.13em', textTransform: 'uppercase', color: 'var(--pink-600)', marginBottom: 16 }}>Components</p>
              <h2 style={{ fontSize: 'clamp(1.6rem,2.4vw,2.1rem)', marginBottom: 22, lineHeight: 1.2 }}>The small parts are where it shows</h2>
              <p style={{ color: 'var(--ink-soft)', lineHeight: 1.75, marginBottom: 18, fontSize: '1.02rem' }}>
                The small parts are where a lot of custom bag makers cut corners, and it shows in the finished product. The Kit Keepers use higher-quality zippers and components than you'd find in an import-grade bag. The trim, taping, and binding are chosen with the finished product in mind, not just the price per unit.
              </p>
              <p style={{ color: 'var(--ink-soft)', lineHeight: 1.75, fontSize: '1.02rem' }}>
                Every Timeless Totes product is made to reflect well on the brand it represents. From the clear vinyl to the matching trim, webbing, and zipper, each component is chosen to create a polished, professional bag that customers feel good carrying and shops feel proud putting their logo on.
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <Mock label="Zipper close-up" sub="Kit Keepers zipper detail" icon="camera" accent="navy" tone="neutral" style={{ aspectRatio: '1/1', borderRadius: 'var(--r-md)' }} />
              <Mock label="Trim and taping" sub="Binding and edge detail" icon="camera" accent="navy" tone="neutral" style={{ aspectRatio: '1/1', borderRadius: 'var(--r-md)' }} />
              <Mock label="Finished Kit Keepers" sub="Stacked completed order" icon="camera" accent="navy" tone="neutral" style={{ aspectRatio: '1/1', borderRadius: 'var(--r-md)' }} />
              <Mock label="Screen printing setup" sub="Production table, print station" icon="camera" accent="navy" tone="neutral" style={{ aspectRatio: '1/1', borderRadius: 'var(--r-md)' }} />
            </div>
          </div>
        </div>
      </section>

      {/* Lead times: why it can take longer */}
      <section className="section" style={{ background: 'var(--navy)', color: '#fff' }}>
        <div className="wrap">
          <div className="quality-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 52, alignItems: 'center' }}>
            <div>
              <p style={{ fontSize: '.8rem', fontWeight: 700, letterSpacing: '.13em', textTransform: 'uppercase', color: 'var(--pink)', marginBottom: 16 }}>Lead times</p>
              <h2 style={{ color: '#fff', fontSize: 'clamp(1.6rem,2.4vw,2.1rem)', marginBottom: 22, lineHeight: 1.2 }}>Good parts sometimes take a little longer</h2>
              <p style={{ color: 'rgba(255,255,255,.72)', lineHeight: 1.75, marginBottom: 18, fontSize: '1.02rem' }}>
                Some products have longer lead times than you'd get from an overseas supplier. That's a trade-off we've made deliberately. Quality components sometimes require more time to source. Production happens in the right order: artwork reviewed, proof approved, materials confirmed, then production starts.
              </p>
              <p style={{ color: 'rgba(255,255,255,.72)', lineHeight: 1.75, fontSize: '1.02rem' }}>
                If something needs more time to come out right, we take that time. The bags that leave here are worth waiting for.
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              {[
                'Artwork reviewed and proof approved',
                'Materials and components confirmed',
                'Production begins on sign-off',
                "Ships when it's right, not just when it's fast",
              ].map((step, i) => (
                <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                  <span style={{ width: 32, height: 32, borderRadius: '50%', background: 'rgba(255,255,255,.08)', border: '1px solid rgba(255,255,255,.18)', color: 'var(--pink)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '.88rem', fontWeight: 700, flexShrink: 0 }}>{i + 1}</span>
                  <p style={{ margin: 0, color: 'rgba(255,255,255,.8)', lineHeight: 1.55, paddingTop: 7, fontSize: '.98rem' }}>{step}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* American-made */}
      <section className="section" style={{ borderBottom: '1px solid var(--line)' }}>
        <div className="wrap-narrow" style={{ textAlign: 'center' }}>
          <p style={{ fontSize: '.8rem', fontWeight: 700, letterSpacing: '.13em', textTransform: 'uppercase', color: 'var(--pink-600)', marginBottom: 20 }}>Where it's made</p>
          <h2 style={{ fontSize: 'clamp(1.8rem,3vw,2.6rem)', maxWidth: 620, margin: '0 auto 24px', lineHeight: 1.2 }}>Entirely made in the USA</h2>
          <p style={{ color: 'var(--ink-soft)', fontSize: '1.05rem', maxWidth: 560, margin: '0 auto 18px', lineHeight: 1.75 }}>
            Production happens here. Our supplier relationships are domestic. Our artwork partner is a few miles down the road in Santa Ana. We think that's worth saying plainly rather than wrapping it in a slogan.
          </p>
          <p style={{ color: 'var(--ink-soft)', fontSize: '1.05rem', maxWidth: 560, margin: '0 auto 36px', lineHeight: 1.75 }}>
            American-made production means we can communicate directly with the people making the bags, catch problems early, and stand behind the quality of what ships.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-primary" onClick={() => ctx.navigate('#/quote')}>Start a Quote <Icon name="arrow" size={16} className="arr" /></button>
            <button className="btn btn-ghost" onClick={() => ctx.navigate('#/artwork')}>Artwork guidelines</button>
          </div>
        </div>
      </section>

      <section className="section" style={{ borderTop: '1px solid var(--line)' }}>
        <div className="wrap-narrow">
          <p style={{ fontSize: 'clamp(1.15rem,1.6vw,1.3rem)', color: 'var(--ink-soft)', marginBottom: 'clamp(36px,5vw,60px)', maxWidth: 560, lineHeight: 1.6 }}>
            We are Timeless Totes. We make bags that hold up, carry your brand well, and earn their keep long after they leave the factory floor.
          </p>
          <h2 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(2rem,3.2vw,2.8rem)', fontWeight: 500, marginBottom: 'clamp(32px,4vw,52px)', letterSpacing: '-.01em' }}>We are…</h2>
          <div className="we-are-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'clamp(28px,4vw,52px)', alignItems: 'start' }}>
            {[
              { sub: 'A family business from Santa Ana, California. We started making clear-vinyl bags over 30 years ago, and the same family still runs every order, start to finish.', icon: 'heart', label: 'Family-owned' },
              { sub: 'Proudly American-made. Every bag is manufactured in the USA so we can keep close control over quality, talk directly with the people doing the work, and stand behind every stitch.', icon: 'flag', label: 'American-made' },
              { sub: 'A team built on long-term relationships with the same trusted domestic suppliers, the same artwork partners, and the shops and brands who keep reordering because the bags come back right.', icon: 'star', label: 'Built on trust' },
            ].map(item => (
              <div key={item.label}>
                <p style={{ fontSize: '.8rem', fontWeight: 700, letterSpacing: '.13em', textTransform: 'uppercase', color: 'var(--pink-600)', marginBottom: 12 }}>{item.label}</p>
                <p style={{ margin: 0, fontSize: 'clamp(.95rem,1.1vw,1.05rem)', color: 'var(--ink-soft)', lineHeight: 1.65 }}>{item.sub}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-sm" style={{ background: 'var(--cream)', borderTop: '1px solid var(--line)' }}>
        <div className="wrap">
          <div className="grid" style={{ gridTemplateColumns: 'repeat(3,1fr)', textAlign: 'center' }}>
            {[['30+', 'Years manufacturing'], ['USA', 'American-made production'], ['1', 'Family, start to finish']].map(([n, l]) => (
              <div key={l}><div className="kicker-stat">{n}</div><div style={{ color: 'var(--ink-soft)', marginTop: 6 }}>{l}</div></div>
            ))}
          </div>
        </div>
      </section>
      <FinalCTA ctx={ctx} />
    </main>
  );
}
/* ---------------- Contact ---------------- */
function ContactPage({ ctx }) {
  const [form, setForm] = React.useState({ name: '', email: '', confirmEmail: '', phone: '', message: '' });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [submitError, setSubmitError] = React.useState(false);

  const setF = (k, v) => { setForm(function(s) { return Object.assign({}, s, {[k]: v}); }); setErrors(function(e) { return Object.assign({}, e, {[k]: null}); }); };

  const validate = function() {
    var e = {};
    if (!form.name.trim()) e.name = 'Name is required.';
    if (!form.email.trim()) e.email = 'Email is required.';
    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = 'Please enter a valid email address.';
    if (!form.confirmEmail.trim()) e.confirmEmail = 'Please confirm your email.';
    else if (form.email !== form.confirmEmail) e.confirmEmail = 'Email addresses do not match.';
    if (!form.message.trim()) e.message = 'Please include a message.';
    return e;
  };

  const handleSubmit = function(e) {
    e.preventDefault();
    var errs = validate();
    if (Object.keys(errs).length) { setErrors(errs); return; }
    setSent(true);
    setSubmitError(false);
  };

  return (
    <main>
      <section className="section" style={{ paddingTop: 'clamp(26px,4vw,44px)' }}>
        <div className="wrap">
          <nav style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '.88rem', color: 'var(--ink-faint)', marginBottom: 14 }}>
            <a href="#/" style={{ color: 'var(--ink-soft)' }}>Home</a>
            <span>/</span>
            <span style={{ color: 'var(--ink)', fontWeight: 600 }}>Contact</span>
          </nav>
          <h1 style={{ fontSize: 'clamp(2rem,3.4vw,2.8rem)', marginBottom: 10 }}>Let's talk about your project</h1>
          <p style={{ fontSize: '1.05rem', color: 'var(--ink-soft)', maxWidth: 520, margin: '0 0 32px', lineHeight: 1.55 }}>Questions about sizing, artwork, or a big order? We're a family-owned team — reach out directly.</p>
          <div className="contact-grid" style={{ display: 'grid', gridTemplateColumns: '.85fr 1.15fr', gap: 48, alignItems: 'start' }}>
            <div>
              {[
                { icon: 'phone', t: 'Phone', v: '(714) 973-6353', sub: 'Mon-Fri 9am-5pm PT', href: 'tel:7149736353' },
                { icon: 'mail', t: 'Email', v: 'timelesstotes@yahoo.com', sub: 'Replies within one business day', href: 'mailto:timelesstotes@yahoo.com' },
                { icon: 'pin', t: 'Visit / ship to', v: '4005 W Segerstrom Ave', sub: 'Santa Ana, CA 92704' },
              ].map(function(c) {
                return (
                  <a key={c.t} href={c.href || '#'} onClick={c.href ? undefined : function(e) { e.preventDefault(); }} style={{ display: 'flex', gap: 16, padding: '18px 0', borderBottom: '1px solid var(--line)' }}>
                    <span style={{ width: 46, height: 46, borderRadius: 12, background: 'var(--navy)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={c.icon} size={22} /></span>
                    <div><div style={{ fontSize: '.82rem', fontWeight: 600, color: 'var(--ink-soft)' }}>{c.t}</div><div style={{ fontWeight: 700, fontSize: '1.1rem', margin: '4px 0' }}>{c.v}</div><div style={{ fontSize: '.88rem', color: 'var(--ink-soft)' }}>{c.sub}</div></div>
                  </a>
                );
              })}
              <Mock label="Santa Ana, CA" sub="Map / location" icon="pin" accent="navy" tone="neutral" style={{ aspectRatio: '16/10', borderRadius: 'var(--r-lg)', marginTop: 24 }} />
              <p style={{ fontSize: '.82rem', color: 'var(--ink-faint)', marginTop: 14, display: 'flex', gap: 8 }}><Icon name="spark" size={15} style={{ color: 'var(--teal)', flexShrink: 0 }} /> Looking for the fastest path to pricing? <a className="link-arrow" style={{ display: 'inline' }} onClick={function() { ctx.navigate('#/quote'); }}>Start a quote</a>.</p>
            </div>
            <div className="card" style={{ padding: 'clamp(24px,3vw,38px)' }}>
              {sent ? (
                <div style={{ textAlign: 'center', padding: '40px 10px' }}>
                  <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--forest-tint)', color: 'var(--forest)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}><Icon name="check" size={32} stroke={2} /></div>
                  <h3 style={{ fontSize: '1.4rem', marginBottom: 10 }}>Message sent</h3>
                  <p style={{ color: 'var(--ink-soft)', marginBottom: 16 }}>Thanks for reaching out. Our team will follow up at <strong>{form.email}</strong> within one business day.</p>
                  <p style={{ fontSize: '.85rem', color: 'var(--ink-faint)' }}>Faster response? Call us at <a href="tel:7149736353" style={{ color: 'var(--navy)' }}>(714) 973-6353</a> or email <a href="mailto:timelesstotes@yahoo.com" style={{ color: 'var(--navy)' }}>timelesstotes@yahoo.com</a> directly.</p>
                  <button className="btn btn-ghost" style={{ marginTop: 16 }} onClick={function() { setSent(false); setForm({ name: '', email: '', confirmEmail: '', phone: '', message: '' }); setErrors({}); }}>Send another message</button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} noValidate>
                  <h3 style={{ fontSize: '1.4rem', marginBottom: 6 }}>Send us a message</h3>
                  <p style={{ fontSize: '.88rem', color: 'var(--ink-soft)', marginBottom: 20 }}>Messages are reviewed and forwarded to timelesstotes@yahoo.com.</p>
                  <div className="field-row">
                    <div className="field">
                      <label>Name <span className="req">*</span></label>
                      <input className="input" placeholder="Your name" value={form.name} onChange={function(e) { setF('name', e.target.value); }}
                        style={errors.name ? { borderColor: '#C0392B' } : {}} />
                      {errors.name && <div style={{ fontSize: '.8rem', color: '#C0392B', marginTop: 4 }}>{errors.name}</div>}
                    </div>
                    <div className="field">
                      <label>Business</label>
                      <input className="input" placeholder="Company / shop" value={form.business || ''} onChange={function(e) { setF('business', e.target.value); }} />
                    </div>
                  </div>
                  <div className="field">
                    <label>Email <span className="req">*</span></label>
                    <input className="input" type="email" placeholder="you@business.com" value={form.email} onChange={function(e) { setF('email', e.target.value); }}
                      style={errors.email ? { borderColor: '#C0392B' } : {}} />
                    {errors.email && <div style={{ fontSize: '.8rem', color: '#C0392B', marginTop: 4 }}>{errors.email}</div>}
                  </div>
                  <div className="field">
                    <label>Confirm email <span className="req">*</span></label>
                    <input className="input" type="email" placeholder="Re-enter your email" value={form.confirmEmail} onChange={function(e) { setF('confirmEmail', e.target.value); }}
                      style={errors.confirmEmail ? { borderColor: '#C0392B' } : {}} />
                    {errors.confirmEmail && <div style={{ fontSize: '.8rem', color: '#C0392B', marginTop: 4 }}>{errors.confirmEmail}</div>}
                  </div>
                  <div className="field">
                    <label>Phone <span style={{ fontSize: '.82rem', color: 'var(--ink-soft)', fontWeight: 400 }}>(strongly recommended)</span></label>
                    <input className="input" type="tel" placeholder="(000) 000-0000" value={form.phone} onChange={function(e) { setF('phone', e.target.value); }} />
                  </div>
                  <div className="field">
                    <label>How can we help? <span className="req">*</span></label>
                    <textarea className="textarea" style={{ minHeight: 130 }} placeholder="Tell us about your project, question, or order..." value={form.message} onChange={function(e) { setF('message', e.target.value); }}
                      style={errors.message ? { borderColor: '#C0392B', minHeight: 130 } : { minHeight: 130 }} />
                    {errors.message && <div style={{ fontSize: '.8rem', color: '#C0392B', marginTop: 4 }}>{errors.message}</div>}
                  </div>
                  {submitError && (
                    <div style={{ padding: '12px 16px', background: '#FEE2E2', borderRadius: 8, fontSize: '.88rem', color: '#B91C1C', marginBottom: 14 }}>
                      Something went wrong. Please try again or email us directly at timelesstotes@yahoo.com.
                    </div>
                  )}
                  <button type="submit" className="btn btn-primary btn-lg btn-block">Send message <Icon name="arrow" size={17} className="arr" /></button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ---------------- FAQ ---------------- */
function FaqPage({ ctx }) {
  const [open, setOpen] = useState(0);
  return (
    <main>
      <PageHero eyebrow="FAQ" title="Questions, answered" lede="Common questions about minimums, artwork, fees, and turnaround. Don't see yours? Reach out — we're happy to help." />
      <section className="section">
        <div className="wrap-narrow">
          {FAQS.map((f, i) => (
            <div key={i} className="card" style={{ marginBottom: 12, overflow: 'hidden' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '20px 24px', background: 'none', border: 'none', textAlign: 'left' }}>
                <span style={{ fontFamily: 'var(--serif)', fontSize: '1.18rem', fontWeight: 500, color: 'var(--ink)' }}>{f.q}</span>
                <span style={{ color: 'var(--teal)', flexShrink: 0, transform: open === i ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}><Icon name="chevronD" size={22} /></span>
              </button>
              {open === i && <div style={{ padding: '0 24px 22px', color: 'var(--ink-soft)', lineHeight: 1.6, maxWidth: 640 }}>{f.a}</div>}
            </div>
          ))}
          <div className="card" style={{ padding: 30, textAlign: 'center', marginTop: 28, background: 'var(--cream)' }}>
            <h3 style={{ fontSize: '1.3rem', marginBottom: 10 }}>Still have a question?</h3>
            <p style={{ color: 'var(--ink-soft)', marginBottom: 20 }}>Our team is glad to walk you through anything before you commit.</p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={() => ctx.navigate('#/quote')}>Start a Quote <Icon name="arrow" size={16} className="arr" /></button>
              <button className="btn btn-ghost" onClick={() => ctx.navigate('#/contact')}>Contact us</button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HowItWorksPage, WholesalePage, ArtworkPage, QualityPage, ContactPage, FaqPage });