// ═══════════════════════════════════════════════
// JAGTAR STUDIO — Homepage
// ═══════════════════════════════════════════════

const JagtarHome = ({ onNavigate }) => {
  const { c, H1, H2, H3, Body, Label, CTA, TextBtn, Section, Img, Divider } = JAGTAR;

  return (
    <div>
      {/* ─── Hero ─── */}
      <div style={{
        position: 'relative',
        minHeight: '100vh',
        display: 'flex', alignItems: 'flex-end',
        overflow: 'hidden',
      }}>
        <Img label="hero — bust, single warm light, dark background"
          dark ratio="auto"
          style={{ position: 'absolute', inset: 0, aspectRatio: 'auto', height: '100%' }} />
        {/* Gradient overlay */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(to top, rgba(17,17,16,0.85) 0%, rgba(17,17,16,0.2) 50%, rgba(17,17,16,0.1) 100%)',
        }} />
        <div style={{
          position: 'relative', zIndex: 1,
          width: '100%',
          padding: 'clamp(60px, 12vw, 160px) clamp(24px, 6vw, 80px)',
          maxWidth: 1200, margin: '0 auto',
        }}>
          <H1 style={{ color: '#F8F6F2', maxWidth: 700 }}>
            The gift they{'’'}ll never forget.
          </H1>
          <Body style={{ color: 'rgba(248,246,242,0.7)', marginTop: 20, maxWidth: 440 }}>
            A personalized sculpture of someone you love. Hand-finished resin, from two photographs. Delivered in 15 days.
          </Body>
          <div style={{ marginTop: 40, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <CTA onClick={() => onNavigate('product')}>Begin Your Commission</CTA>
            <CTA secondary onClick={() => onNavigate('how')} style={{ color: '#F8F6F2', borderColor: 'rgba(248,246,242,0.3)' }}>
              See the Process
            </CTA>
          </div>
        </div>
      </div>

      {/* ─── Quiet transition ─── */}
      <Section style={{ textAlign: 'center', padding: 'clamp(60px,8vw,120px) clamp(24px,6vw,80px)' }}>
        <H2 style={{ color: c.gray, maxWidth: 600, margin: '0 auto' }}>
          Some people deserve a monument.
        </H2>
      </Section>

      {/* ─── How it works — 3 steps ─── */}
      <Section cream>
        <Label style={{ display: 'block', textAlign: 'center', marginBottom: 60 }}>The Process</Label>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 'clamp(32px, 4vw, 60px)',
        }}>
          {[
            ['01', 'Send two photos', 'A front-facing photo and a side profile. Natural light, no sunglasses. That’s all we need.'],
            ['02', 'We sculpt by hand', 'Your photographs become a 3D model, then a resin bust. Each one is sanded, primed, and finished by hand.'],
            ['03', 'Delivered to you', 'Fifteen days later, your sculpture arrives in a presentation box. Ready to gift or display.'],
          ].map(([num, title, desc]) => (
            <div key={num} style={{ textAlign: 'center' }}>
              <div style={{
                fontFamily: "'Cormorant Garamond', Georgia, serif",
                fontSize: 48, color: c.border, lineHeight: 1, marginBottom: 20,
              }}>{num}</div>
              <H3 style={{ fontSize: 22, marginBottom: 12 }}>{title}</H3>
              <Body small style={{ maxWidth: 300, margin: '0 auto' }}>{desc}</Body>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 48 }}>
          <TextBtn onClick={() => onNavigate('how')}>Learn more about the process</TextBtn>
        </div>
      </Section>

      {/* ─── Gallery ─── */}
      <Section>
        <Label style={{ display: 'block', textAlign: 'center', marginBottom: 48 }}>Recent Commissions</Label>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 12,
        }}>
          <Img label="bust — woman, profile" ratio="3/4" style={{ gridRow: 'span 2' }} />
          <Img label="bust — elderly man" ratio="1/1" />
          <Img label="bust — child" ratio="1/1" />
          <Img label="lifestyle — bust on bookshelf" ratio="16/9" style={{ gridColumn: 'span 2' }} />
        </div>
      </Section>

      {/* ─── Testimonials ─── */}
      <Section cream>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: 'clamp(32px, 5vw, 80px)',
        }}>
          {[
            ['“I gave it to my mother for her 70th birthday. She cried.”', 'Sarah, London'],
            ['“It sits on his desk. He looks at it every day.”', 'Michael, Toronto'],
          ].map(([quote, name], i) => (
            <div key={i}>
              <H3 style={{ color: c.terracotta, fontSize: 'clamp(20px, 2.5vw, 28px)', lineHeight: 1.4, marginBottom: 16 }}>
                {quote}
              </H3>
              <Body small style={{ color: c.gray }}>{'—'} {name}</Body>
            </div>
          ))}
        </div>
      </Section>

      {/* ─── Founder teaser ─── */}
      <Section>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: 'clamp(32px, 5vw, 80px)',
          alignItems: 'center',
        }}>
          <Img label="founder — candid, in studio" ratio="4/5" />
          <div style={{ padding: 'clamp(0px, 2vw, 40px) 0' }}>
            <Label style={{ display: 'block', marginBottom: 20 }}>The Story</Label>
            <H3 style={{ marginBottom: 16 }}>
              {'“'}I started Jagtar Studio to turn the people we love into something permanent.{'”'}
            </H3>
            <Body style={{ marginBottom: 24, maxWidth: 400 }}>
              What began as a way to remember became a way to celebrate. Every commission is personal. Every sculpture is made with care.
            </Body>
            <TextBtn onClick={() => {}}>Read the full story</TextBtn>
          </div>
        </div>
      </Section>

      {/* ─── Final CTA ─── */}
      <Section style={{
        textAlign: 'center',
        padding: 'clamp(80px, 12vw, 200px) clamp(24px, 6vw, 80px)',
      }}>
        <H2 style={{ marginBottom: 12 }}>Someone you love deserves this.</H2>
        <Body style={{ color: c.gray, marginBottom: 40 }}>From $49. Free worldwide shipping.</Body>
        <CTA onClick={() => onNavigate('product')}>Begin Your Commission</CTA>
      </Section>
    </div>
  );
};

Object.assign(window, { JagtarHome });
