/* Timeless Totes — Home */

function HomeHero({ ctx }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', paddingTop: 'clamp(44px,6vw,84px)', paddingBottom: 'clamp(44px,5vw,72px)' }}>
      <div className="wrap">
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 64, alignItems: 'center' }}>
          <div className="fade-up">
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24, color: 'var(--ink-soft)', fontSize: '.92rem', fontWeight: 500 }}>
              <Flower size={20} color="var(--pink)" hole="var(--bone)" />
              <span>Family-owned &middot; American-made &middot; 30+ years</span>
            </div>
            <h1 style={{ marginBottom: 24 }}>
              Custom clear-vinyl totes,<br /><span style={{ fontStyle: 'italic', color: 'var(--pink-600)' }}>built for your brand.</span>
            </h1>
            <p className="lede" style={{ maxWidth: 500, marginBottom: 34 }}>
              For more than 30 years, our family has manufactured high-quality clear-vinyl totes and project bags in the USA — silkscreened with your logo for needlepoint shops, craft retailers, and event buyers nationwide.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary btn-lg" onClick={() => ctx.navigate('#/quote')}>Start a Quote <Icon name="arrow" size={18} className="arr" /></button>
              <button className="btn btn-ghost btn-lg" onClick={() => ctx.navigate('#/products')}>Browse Products</button>
            </div>
            <p style={{ display: 'flex', alignItems: 'flex-start', gap: 9, marginTop: 18, maxWidth: 460, fontSize: '.96rem', color: 'var(--ink-soft)', lineHeight: 1.55 }}>
              <Icon name="shield" size={18} style={{ color: 'var(--pink-600)', flexShrink: 0, marginTop: 1 }} />
              Upload your artwork — we review every file and send a confirmed quote and proof before production.
            </p>
            <div style={{ display: 'flex', gap: 40, marginTop: 40, flexWrap: 'wrap' }}>
              {[['30+', 'Years manufacturing'], ['USA', 'American-made production'], ['1–4', 'Color silkscreen']].map(([n, l]) => (
                <div key={l}>
                  <div className="kicker-stat" style={{ fontSize: '2.1rem' }}>{n}</div>
                  <div style={{ fontSize: '.85rem', color: 'var(--ink-soft)', marginTop: 4 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="fade-up" style={{ position: 'relative' }}>
            <div style={{ aspectRatio: '4/5', borderRadius: 'var(--r-xl)', boxShadow: 'var(--shadow-lg)', overflow: 'hidden', background: '#fff', border: '1px solid var(--line)' }}>
              <ProductImage src={PRODUCTS[0].cardImg} label="Clear vinyl tote" sub="Logo silkscreen mockup" accent="pink" style={{ width: '100%', height: '100%' }} />
            </div>
            <div className="card" style={{ position: 'absolute', bottom: -20, left: -20, padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 12, boxShadow: 'var(--shadow-md)' }}>
              <span style={{ width: 40, height: 40, borderRadius: 11, background: 'var(--pink-tint)', color: 'var(--pink-700)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="palette" size={20} /></span>
              <div>
                <div style={{ fontWeight: 700, fontSize: '.95rem' }}>Free digital proof</div>
                <div style={{ fontSize: '.82rem', color: 'var(--ink-soft)' }}>Approve before we print</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Credibility() {
  const audience = ['Needlepoint shops', 'Craft retailers', 'Quilt & yarn brands', 'Event buyers', 'Wholesale orders'];
  return (
    <section className="section-sm" style={{ borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="wrap">
        <p className="center" style={{ fontSize: '1rem', fontWeight: 500, color: 'var(--ink-soft)', marginBottom: 24 }}>
          For shops, brands, events, and wholesale orders — custom clear-vinyl bags, silkscreened with your logo.
        </p>

        <div className="logo-row" style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center', gap: '18px 40px' }}>
          {CLIENT_LOGOS.map(name => (
            <div key={name} style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: '1.3rem', color: 'var(--navy-300)', fontWeight: 500 }}>{name} <span style={{ fontFamily:'var(--sans)', fontStyle:'normal', fontSize:'.7rem', color:'var(--ink-faint)', fontWeight:400 }}>placeholder</span></div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ArtworkStrip({ ctx }) {
  return (
    <section style={{ background: 'var(--pink-faint)', borderTop: '1px solid var(--pink-tint)', borderBottom: '1px solid var(--pink-tint)', padding: 'clamp(16px,2vw,24px) 0' }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ width: 44, height: 44, borderRadius: 11, background: 'var(--pink-tint)', color: 'var(--pink-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="upload" size={22} /></span>
          <div>
            <strong style={{ fontSize: '1.05rem', display: 'block' }}>Already have your logo?</strong>
            <span style={{ fontSize: '.96rem', color: 'var(--ink-soft)' }}>Upload your artwork and we'll review it before quoting — no commitment.</span>
          </div>
        </div>
        <button className="btn btn-accent btn-sm" onClick={() => ctx.navigate('#/quote')}>Upload Artwork <Icon name="arrow" size={15} className="arr" /></button>
      </div>
    </section>
  );
}

function PopularProducts({ ctx }) {
  const kit = PRODUCTS[0];
  const rest = PRODUCTS.slice(1, 4);
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead title="Start with a favorite" lede="Our most-ordered styles, ready to silkscreen with your logo. Kit Keepers lead the pack." />
        <div className="popular-grid" style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 28 }}>
          <ProductCard p={kit} ctx={ctx} featured />
          <div style={{ display: 'grid', gridTemplateRows: 'repeat(3, 1fr)', gap: 16 }}>
            {rest.map(p => (
              <article key={p.slug} className="card" onClick={() => ctx.navigate('#/product/' + p.slug)}
                style={{ display: 'flex', gap: 18, padding: 16, cursor: 'pointer', alignItems: 'center' }}>
                <ProductImage src={p.cardImg} label="" accent={p.accent} compact style={{ width: 96, height: 96, borderRadius: 12, flexShrink: 0 }} />
                <div style={{ flex: 1 }}>
                  <h3 style={{ fontSize: '1.2rem' }}>{p.name}</h3>
                  <p style={{ fontSize: '.92rem', color: 'var(--ink-soft)', margin: '6px 0 0' }}>{p.blurb}</p>
                </div>
                <button className="btn btn-ghost btn-sm" onClick={(e) => { e.stopPropagation(); ctx.addToQuote(p); }} style={{ flexShrink: 0 }}><Icon name="plus" size={15} /></button>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function CategoryGrid({ ctx }) {
  return (
    <section className="section" style={{ background: 'var(--cream)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 40 }}>
          <SectionHead title="Every style we make" lede="Browse our current catalog of clear-vinyl styles, each made to order in the USA." />
          <button className="btn btn-ghost" onClick={() => ctx.navigate('#/products')} style={{ marginBottom: 8 }}>View all products <Icon name="arrow" size={16} className="arr" /></button>
        </div>
        <div className="cat-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {PRODUCTS.map(p => (
            <ProductCard key={p.slug} p={p} ctx={ctx} />
          ))}
        </div>
      </div>
    </section>
  );
}

function CustomOrders({ ctx }) {
  const opts = [
    { icon: 'ruler', t: 'Custom sizes', d: "Need a size we don't list? We build to spec for your kit or product." },
    { icon: 'palette', t: 'Logo printing', d: 'Crisp 1–4 color silkscreen of your logo or artwork on clear vinyl.' },
    { icon: 'spark', t: 'Ink colors', d: 'Match to Pantone or hex; our team advises on the best result.' },
    { icon: 'layers', t: 'Zipper & trim', d: 'Choose zipper colors and custom trim/taping to finish your bag.' },
    { icon: 'upload', t: 'Artwork upload', d: 'Send vector or PNG; we review every file before production.' },
    { icon: 'truck', t: 'Wholesale runs', d: 'Built for volume — from first order to ongoing reorders.' },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="custom-grid" style={{ display: 'grid', gridTemplateColumns: '.9fr 1.1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <SectionHead title="Made exactly the way you need" lede="Clear vinyl is just the start. Every order is custom — your size, your logo, your colors, your finish." />
            <div style={{ display: 'flex', gap: 12, 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>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {opts.map((o, i) => (
              <div key={o.t} style={{
                display: 'flex', gap: 16, padding: '16px 0',
                borderBottom: i < opts.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: '1.02rem', 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>
  );
}

function HowItWorksStrip({ ctx }) {
  const steps = [
    { icon: 'ruler', t: 'Choose a product or custom size', d: 'Pick a style from our catalog or request a fully custom size.' },
    { icon: 'upload', t: 'Upload your artwork or logo', d: 'Vector preferred, PNG accepted. We review every file.' },
    { icon: 'palette', t: 'Select your specs', d: 'Quantity, size, ink colors, zipper / trim options, and timing.' },
    { icon: 'check', t: 'Approve your quote & proof', d: 'We confirm a quote and digital proof before any production.' },
  ];
  return (
    <section className="section" style={{ background: 'var(--navy)', color: '#fff' }}>
      <div className="wrap">
        <SectionHead title="From idea to delivered, in four steps" center light />
        <div className="steps-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 24, marginTop: 8 }}>
          {steps.map((s, i) => (
            <div key={s.t} style={{ position: 'relative' }}>
              <span style={{ width: 48, height: 48, borderRadius: 13, background: 'rgba(255,255,255,.08)', border: '1px solid rgba(255,255,255,.16)', color: '#F6A8C9', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}><Icon name={s.icon} size={23} /></span>
              {i < 3 && (
                <span className="step-arrow" style={{ position: 'absolute', top: 14, right: -12, transform: 'translateX(50%)', color: 'var(--pink)', display: 'flex' }}>
                  <Icon name="arrow" size={20} />
                </span>
              )}
              <h3 style={{ color: '#fff', fontSize: '1.18rem', marginBottom: 8 }}>{s.t}</h3>
              <p style={{ color: 'rgba(255,255,255,.72)', fontSize: '.92rem', margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 48 }}>
          <button className="btn btn-white btn-lg" onClick={() => ctx.navigate('#/how-it-works')}>See the full process <Icon name="arrow" size={18} className="arr" /></button>
        </div>
      </div>
    </section>
  );
}

function QualityStrip({ ctx }) {
  return (
    <section className="section">
      <div className="wrap">
        <div className="quality-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <Mock label="Made in the USA" sub="Manufacturing floor photo" icon="camera" accent="navy" tone="neutral" style={{ aspectRatio: '5/4', borderRadius: 'var(--r-xl)' }} />
          <div>
            <SectionHead title="30 years of the same approach" lede="Quality vinyl, trusted supplier relationships, and a long-time artwork partner a few miles down the road — that consistency shows in every bag we ship." />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 32 }}>
              {[
                { label: 'Artwork partner', detail: 'Mary at Fullservice Graphics, Santa Ana — nearly 30 years reviewing every file and every proof.' },
                { label: 'Vinyl source', detail: 'Coated Fabrics, Commerce CA — chosen for quality and weight, not lowest unit cost.' },
                { label: 'American-made', detail: 'Production and supplier relationships are domestic, start to finish.' },
              ].map(r => (
                <div key={r.label} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--pink)', flexShrink: 0, marginTop: 9 }} />
                  <div>
                    <strong style={{ fontSize: '.94rem', color: 'var(--ink)' }}>{r.label}: </strong>
                    <span style={{ fontSize: '.94rem', color: 'var(--ink-soft)' }}>{r.detail}</span>
                  </div>
                </div>
              ))}
            </div>
            <button className="btn btn-ghost" onClick={() => ctx.navigate('#/quality')}>Our quality story <Icon name="arrow" size={16} className="arr" /></button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const t = TESTIMONIALS[0];
  return (
    <section className="section" style={{ background: 'var(--cream)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="wrap">
        <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
          <span style={{ fontFamily: 'var(--serif)', fontSize: '4.5rem', lineHeight: .6, color: 'var(--blush)', display: 'block', marginBottom: 8 }}>&ldquo;</span>
          <blockquote style={{ margin: 0, fontFamily: 'var(--serif)', fontSize: 'clamp(1.5rem,2.8vw,2.1rem)', lineHeight: 1.32, color: 'var(--ink)', fontWeight: 500 }}>
            The clarity and stitching quality are a step above anything we found overseas. The proof process gave us total confidence before production — and our customers notice, so they reorder.
          </blockquote>
          <figcaption style={{ marginTop: 30, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14 }}>
            <span style={{ width: 48, height: 48, borderRadius: '50%', background: 'var(--pink-tint)', color: 'var(--pink-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Flower size={24} color="var(--pink)" hole="var(--pink-tint)" /></span>
            <div style={{ textAlign: 'left' }}>
              <div style={{ fontWeight: 700, fontSize: '1rem' }}>{t.name} <span style={{ fontWeight: 400, color: 'var(--ink-faint)', fontSize: '.82rem' }}>· placeholder</span></div>
              <div style={{ fontSize: '.9rem', color: 'var(--ink-soft)' }}>{t.role}</div>
            </div>
          </figcaption>
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ ctx }) {
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ background: 'var(--navy)', borderRadius: 'var(--r-xl)', padding: 'clamp(40px,6vw,76px)', position: 'relative', overflow: 'hidden', textAlign: 'center' }}>
          <div style={{ position: 'absolute', inset: 0, backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 16px)' }} />
          <div style={{ position: 'relative', maxWidth: 640, margin: '0 auto' }}>
            <h2 style={{ color: '#fff', marginBottom: 18 }}>Let's make something with your logo on it</h2>
            <p style={{ color: 'rgba(255,255,255,.8)', fontSize: '1.12rem', marginBottom: 32 }}>Start a quote in minutes. No payment now — we confirm pricing after artwork and production review.</p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              <button className="btn btn-accent btn-lg" onClick={() => ctx.navigate('#/quote')}>Start a Quote <Icon name="arrow" size={18} className="arr" /></button>
              <button className="btn btn-white btn-lg" onClick={() => ctx.navigate('#/contact')}>Talk to a specialist</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage({ ctx }) {
  return (
    <main>
      <HomeHero ctx={ctx} />
      <Credibility />
      <ArtworkStrip ctx={ctx} />
      <PopularProducts ctx={ctx} />
      <CategoryGrid ctx={ctx} />
      <CustomOrders ctx={ctx} />
      <HowItWorksStrip ctx={ctx} />
      <QualityStrip ctx={ctx} />
      <Testimonials />
      <FinalCTA ctx={ctx} />
    </main>
  );
}

Object.assign(window, { HomePage, FinalCTA });