// Story (overcoming challenges), Process, Mockup, Reviews carousel

function Story() {
  // Speaks plainly about the founder being disabled, then pivots fast to craft.
  return (
    <section id="story" className="pm-section" style={{
      padding: '140px 40px', background: PM.bone, color: PM.ink,
      position: 'relative', overflow: 'hidden',
    }}>
      <div className="pm-grain" style={{ opacity: .25 }} />

      <div className="pm-story-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'center', position: 'relative' }}>
        <div className="pm-reveal">
          <div className="pm-mono" style={{ fontSize: 11, color: PM.yellowDeep, marginBottom: 16 }}>
            ◆ 03 / THE FOUNDER&rsquo;S STORY
          </div>
          <h2 className="pm-display pm-section-title" style={{ fontSize: 'clamp(56px,7vw,110px)', color: PM.ink, margin: 0 }}>
            A studio<br/>
            <span style={{ color: PM.yellowDeep }}>built different.</span>
          </h2>
          <div className="pm-script" style={{ fontSize: 36, color: PM.ink, marginTop: 16, transform: 'rotate(-1deg)' }}>
            And a stubborn streak.
          </div>
        </div>

        <div className="pm-reveal">
          <p className="pm-story-lead" style={{ fontSize: 24, lineHeight: 1.45, color: PM.ink, fontWeight: 500, marginBottom: 24 }}>
Pressing Matters is a proudly disabled-owned South African business. It started small. One press, one room, one founder who decided that the cards he was dealt weren&rsquo;t reasons to stop.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: PM.mutedDark, marginBottom: 16 }}>
What grew from that decision is a studio that takes craft seriously. Every shirt folded properly. Every mug packed with care. Every order quality-checked before it ships. We&rsquo;re grateful for every customer who chooses us, and we earn that choice with the work.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: PM.mutedDark, marginBottom: 32 }}>
When you order from Pressing Matters, you&rsquo;re backing a small business that punches above its weight, supporting a disabled entrepreneur, and helping us keep doing what we love.
          </p>

          <div className="pm-founder-quote" style={{
            padding: 24, background: PM.ink, color: PM.bone,
            borderLeft: `6px solid ${PM.yellow}`,
            display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap',
          }}>
            <div className="pm-display pm-founder-quote-mark" style={{ fontSize: 48, color: PM.yellow, lineHeight: 1 }}>“</div>
            <div style={{ flex: 1, minWidth: 200 }}>
              <div className="pm-script pm-founder-quote-text" style={{ fontSize: 30, lineHeight: 1.1 }}>
                We play the cards we&rsquo;re dealt.<br/>And we deal a damn good hand.
              </div>
              <div className="pm-mono" style={{ fontSize: 11, color: PM.muted, marginTop: 8 }}>
FOUNDER · PRESSING MATTERS
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { n: '01', t: 'BRIEF', body: 'Drop us a line on WhatsApp or email. Tell us product, quantity, deadline.', meta: '~ same day' },
    { n: '02', t: 'PROOF', body: 'You get a fixed price plus a digital proof. We tweak till you\'re thrilled.', meta: '24 to 48 hrs' },
    { n: '03', t: 'PRINT', body: 'Hand-pressed right here in Johannesburg. Quality-checked piece by piece.', meta: '3 to 7 days' },
    { n: '04', t: 'SHIP', body: 'Collection available in JHB, or door-to-door courier across SA.', meta: '+1 to 3 days' },
  ];
  return (
    <section id="process" className="pm-section" style={{ padding: '120px 40px' }}>
      <div className="pm-reveal pm-section-heading" style={{ marginBottom: 64 }}>
        <div className="pm-mono" style={{ fontSize: 11, color: PM.yellow, marginBottom: 16 }}>◆ 04 / HOW IT WORKS</div>
        <h2 className="pm-display pm-section-title" style={{ fontSize: 'clamp(56px,9vw,140px)', color: PM.bone, margin: 0 }}>
          From idea to <span style={{ color: PM.yellow }}>impression.</span>
        </h2>
      </div>

      <div className="pm-process-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {steps.map((s, i) => (
          <div key={s.n} className="pm-reveal pm-process-step" style={{
            padding: 28, background: i === 1 ? PM.yellow : 'transparent',
            color: i === 1 ? PM.ink : PM.bone,
            border: `2px solid ${i === 1 ? PM.yellow : PM.bone}`,
            transform: `rotate(${[-1, .5, -.5, 1][i]}deg)`,
            minHeight: 280, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          }}>
            <div className="pm-display pm-process-number" style={{ fontSize: 80, lineHeight: .9 }}>{s.n}</div>
            <div>
              <div className="pm-display" style={{ fontSize: 32, marginBottom: 8 }}>{s.t}</div>
              <p style={{ fontSize: 14, lineHeight: 1.5, marginBottom: 16, opacity: i === 1 ? 1 : .8 }}>{s.body}</p>
              <div className="pm-mono" style={{ fontSize: 10 }}>⏱ {s.meta}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Reviews() {
  // Editorial-style review slides. Each entry can carry a long multi-paragraph
  // quote + a custom image layout. Placeholders use the same shape so swapping
  // in real reviews later is a one-object change.
  const reviews = [
    {
      stars: 5,
      paragraphs: [
        'I have used Pressing Matters a few times and I absolutely love the final product.',
        'It is absolutely worth it. They are on time and deliver an amazing product each time.',
        'I haven\u2019t had to wait long for any item I have ordered. And what\u2019s more! They are affordable.',
        'Thank you, Pressing Matters.',
      ],
      who: 'Rayne J.',
      role: 'Repeat customer \u00b7 Custom hoodie',
      images: [
        { src: A('assets/review-rayne-1.jpg'), alt: 'Rayne wearing the custom unicorn hoodie at a car show', span: 'hero' },
        { src: A('assets/review-rayne-2.jpg'), alt: 'Back of the hoodie with the unicorn print', span: 'tall' },
        { src: A('assets/review-rayne-3.jpg'), alt: 'Close-up of the hoodie\u2019s unicorn print', span: 'wide' },
      ],
    },
    {
      stars: 5,
      paragraphs: [
        'We ordered a bulk run of mugs for our team with a verse and our logo printed on each one. The print quality is sharp, the writing is clean, and every single mug came out looking the same.',
        'They were boxed up neatly and ready to hand out the moment they arrived. Excellent service from start to finish. Will absolutely use Pressing Matters again.',
      ],
      who: 'Tania M.',
      role: 'Bulk mug order \u00b7 custom scripture print',
      images: [
        { src: A('assets/review-cups-1.jpg'), alt: 'Finished printed mugs laid out on the press table', span: 'hero' },
        { src: A('assets/review-cups-2.jpg'), alt: 'Bulk mug order packed for delivery', span: 'tall' },
      ],
      placeholder: true,
    },
    {
      stars: 5,
      paragraphs: [
        'I asked for custom Nightmare Before Christmas lanyards, fully printed end to end with all my favourite characters. They came back exactly how I pictured them.',
        'The colours are bright, the print runs the full length, and the lanyards feel like proper quality. Had compliments at the event the moment I wore them.',
      ],
      who: 'Megan D.',
      role: 'Custom themed lanyards',
      images: [
        { src: A('assets/review-lanyards-1.jpg'), alt: 'Custom Nightmare Before Christmas lanyards', span: 'hero' },
      ],
      placeholder: true,
    },
  ];

  const [idx, setIdx] = React.useState(0);
  const [auto, setAuto] = React.useState(true);
  React.useEffect(() => {
    if (!auto) return;
    // Longer interval since reviews can be multi-paragraph and need reading time
    const t = setInterval(() => setIdx((i) => (i + 1) % reviews.length), 12000);
    return () => clearInterval(t);
  }, [auto, reviews.length]);

  return (
    <section id="reviews" className="pm-section" style={{
      padding: '120px 40px', background: PM.yellow, color: PM.ink,
      position: 'relative', overflow: 'hidden',
    }}>
      <div className="pm-grain" style={{ opacity: .15 }} />

      <div className="pm-reveal pm-section-heading" style={{ marginBottom: 56, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 24, flexWrap: 'wrap' }}>
          <h2 className="pm-display pm-section-title" style={{ fontSize: 'clamp(56px,9vw,140px)', margin: 0 }}>WORDS FROM</h2>
          <span className="pm-script pm-section-script" style={{ fontSize: 'clamp(40px,7vw,100px)' }}>the workshop floor.</span>
        </div>
        <div className="pm-mono" style={{ fontSize: 11, color: PM.ink, opacity: .65 }}>
          REVIEW {String(idx + 1).padStart(2, '0')} / {String(reviews.length).padStart(2, '0')}
        </div>
      </div>

      {/* Carousel */}
      <div className="pm-reveal" style={{ position: 'relative' }}
        onMouseEnter={() => setAuto(false)} onMouseLeave={() => setAuto(true)}>
        <div style={{ overflow: 'hidden' }}>
          <div className="pm-review-track" style={{ transform: `translateX(-${idx * 100}%)` }}>
            {reviews.map((r, i) => (
              <div key={i} style={{ minWidth: '100%', padding: '0 4px' }}>
                <ReviewCard review={r} active={i === idx} />
              </div>
            ))}
          </div>
        </div>

        {/* Dots */}
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 32 }}>
          {reviews.map((_, i) => (
            <button key={i} onClick={() => setIdx(i)}
              className={'pm-dot' + (i === idx ? ' active' : '')} aria-label={`Review ${i+1}`} />
          ))}
        </div>

        {/* Prev / Next - pushed outside the slide area so they do not overlap photos */}
        <button onClick={() => setIdx((idx - 1 + reviews.length) % reviews.length)}
          className="pm-btn pm-btn-dark pm-review-prev"
          style={{ position: 'absolute', top: '50%', left: -24, transform: 'translateY(-50%)', padding: '14px 18px', fontSize: 16, boxShadow: `3px 3px 0 ${PM.ink}`, zIndex: 4 }}
          aria-label="Previous review">←</button>
        <button onClick={() => setIdx((idx + 1) % reviews.length)}
          className="pm-btn pm-btn-dark pm-review-next"
          style={{ position: 'absolute', top: '50%', right: -24, transform: 'translateY(-50%)', padding: '14px 18px', fontSize: 16, boxShadow: `3px 3px 0 ${PM.ink}`, zIndex: 4 }}
          aria-label="Next review">→</button>
      </div>

      <div className="pm-reveal pm-review-stats" style={{ marginTop: 96, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, paddingTop: 32, borderTop: `2px solid ${PM.ink}` }}>
        {[
          { n: '4.8★', l: 'Average customer rating' },
          { n: '24 HRS', l: 'Quote turnaround' },
          { n: 'NO MIN', l: 'Order minimums on tees' },
          { n: '100%', l: 'Hand-finished in JHB' },
        ].map((s) => (
          <div key={s.l}>
            <div className="pm-display" style={{ fontSize: 'clamp(40px,5vw,80px)', lineHeight: 1 }}>{s.n}</div>
            <div className="pm-mono" style={{ fontSize: 10, marginTop: 8 }}>{s.l.toUpperCase()}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function ReviewCard({ review, active }) {
  const stars = '\u2605'.repeat(review.stars);
  const hasImages = review.images && review.images.length > 0;

  return (
    <div className="pm-review-card" style={{
      background: PM.bone, color: PM.ink,
      border: `3px solid ${PM.ink}`,
      boxShadow: `8px 8px 0 ${PM.ink}`,
      padding: 0, position: 'relative',
      display: 'grid',
      gridTemplateColumns: hasImages ? '1.1fr 1fr' : '1fr',
      minHeight: 560,
    }}>
      {hasImages && (
        <ReviewImageCollage images={review.images} />
      )}

      <div className="pm-review-copy" style={{
        padding: 'clamp(28px, 4vw, 56px)',
        display: 'flex', flexDirection: 'column', gap: 24,
        position: 'relative',
      }}>
        {/* Decorative big quote mark in the corner */}
        <div className="pm-display pm-review-quote-mark" style={{
          position: 'absolute', top: 8, right: 24, fontSize: 180,
          color: PM.yellow, lineHeight: .8, pointerEvents: 'none', userSelect: 'none',
        }}>&ldquo;</div>

        <div style={{ position: 'relative', zIndex: 1 }}>
          <div style={{
            color: PM.yellowDeep, fontSize: 22, letterSpacing: 6,
            marginBottom: 24,
          }}>{stars}</div>

          <div style={{
            display: 'flex', flexDirection: 'column', gap: 14,
            fontSize: 'clamp(15px, 1.15vw, 18px)', lineHeight: 1.55, fontWeight: 500,
            color: review.placeholder ? PM.muted : PM.ink,
            fontStyle: review.placeholder ? 'italic' : 'normal',
            maxWidth: 540,
          }}>
            {review.paragraphs.map((p, i) => <p key={i} style={{ margin: 0 }}>{p}</p>)}
          </div>
        </div>

        <div className="pm-review-person" style={{
          marginTop: 'auto', paddingTop: 24,
          borderTop: `2px solid ${PM.ink}`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 12,
        }}>
          <div>
            <div className="pm-display" style={{ fontSize: 30, lineHeight: 1 }}>{review.who}</div>
            <div className="pm-mono" style={{ fontSize: 11, color: PM.muted, marginTop: 6 }}>{review.role}</div>
          </div>
          <div className="pm-script" style={{
            fontSize: 28, color: PM.yellowDeep, lineHeight: 1, transform: 'rotate(-3deg)',
            opacity: review.placeholder ? 0 : 1,
          }}>
            verified
          </div>
        </div>
      </div>
    </div>
  );
}

// Image collage for review cards. Adapts to 1, 2, or 3 photos.
//   1 photo: centered hero, takes the available space
//   2 photos: hero (large left) plus tall (right)
//   3 photos: hero (large left) plus tall and wide (right)
// Slight rotations and tape strips for the taped-up-on-the-workshop-wall vibe.
function ReviewImageCollage({ images }) {
  const count = images.length;

  if (count === 1) {
    return (
      <div className="pm-review-collage pm-review-collage-one" style={{
        position: 'relative', background: PM.ink,
        padding: 'clamp(24px, 4vw, 48px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        minHeight: 560,
      }}>
        <ReviewImage img={images[0]} rotate={-1.5} tapeAt="30%" fullHeight />
      </div>
    );
  }

  if (count === 2) {
    return (
      <div className="pm-review-collage pm-review-collage-two" style={{
        position: 'relative', background: PM.ink,
        padding: 'clamp(20px, 3vw, 36px)',
        display: 'grid',
        gridTemplateColumns: '1.3fr 1fr',
        gridTemplateRows: '1fr',
        gridTemplateAreas: '"hero tall"',
        gap: 14,
        minHeight: 560,
      }}>
        <ReviewImage img={images[0]} area="hero" rotate={-1.5} tapeAt="20%" />
        <ReviewImage img={images[1]} area="tall" rotate={2} tapeAt="55%" />
      </div>
    );
  }

  // 3 photos
  const [hero, tall, wide] = images;
  return (
    <div className="pm-review-collage pm-review-collage-three" style={{
      position: 'relative', background: PM.ink,
      padding: 'clamp(20px, 3vw, 36px)',
      display: 'grid',
      gridTemplateColumns: '1.4fr 1fr',
      gridTemplateRows: '1.4fr 1fr',
      gridTemplateAreas: '"hero tall" "hero wide"',
      gap: 14,
      minHeight: 560,
    }}>
      <ReviewImage img={hero} area="hero" rotate={-1.5} tapeAt="20%" />
      <ReviewImage img={tall} area="tall" rotate={2} tapeAt="60%" />
      <ReviewImage img={wide} area="wide" rotate={-1} tapeAt="30%" />
    </div>
  );
}

function ReviewImage({ img, area, rotate, tapeAt, fullHeight }) {
  if (!img) return null;
  return (
    <div className="pm-review-image" style={{
      ...(area ? { gridArea: area } : {}),
      position: 'relative',
      transform: `rotate(${rotate}deg)`,
      background: PM.bone,
      padding: 10,
      boxShadow: `4px 4px 0 ${PM.yellow}, 0 8px 24px rgba(0,0,0,.35)`,
      transition: 'transform .3s ease',
      width: fullHeight ? 'auto' : '100%',
      height: fullHeight ? '90%' : '100%',
      maxHeight: fullHeight ? 480 : 'none',
      aspectRatio: fullHeight ? '3/4' : 'auto',
      overflow: 'hidden',
    }}>
      <div className="pm-tape" style={{ left: tapeAt }} />
      {img.placeholder ? (
        <div style={{
          width: '100%', height: '100%', minHeight: 160,
          background: '#26221c', border: `2px dashed ${PM.muted}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: FONTS.mono, fontSize: 10, color: PM.muted,
          letterSpacing: '.1em', textAlign: 'center', padding: 12,
        }}>
          REVIEW PHOTO<br/>(coming soon)
        </div>
      ) : (
        <img src={img.src} alt={img.alt || ''} loading="lazy"
          style={{
            width: '100%', height: '100%', objectFit: 'cover', display: 'block',
            minHeight: 0,
          }} />
      )}
    </div>
  );
}

window.Story = Story;
window.Process = Process;
window.Reviews = Reviews;