// Five pillars — editorial spread, color per pillar, layered imagery
const PILLARS = [
  {
    n: 'I', key: 'plan', title: 'Plan',
    kicker: 'The floor planner',
    body: 'Draw your room to scale before anything gets bought. Walls, doors, windows, furniture footprints. See what fits before you fall for what doesn’t.',
    meta: '2D top-down · scale-accurate',
    icon: 'Plan',
    img:  'https://images.unsplash.com/photo-1615529182904-14819c35db37?w=900&q=80&auto=format&fit=crop',
    img2: 'https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=600&q=80&auto=format&fit=crop',
    swatch: 'var(--brass)',
    bg: 'linear-gradient(180deg, #0c0b0a 0%, #14110d 100%)',
    quote: '“The average person buys furniture that doesn’t fit.”',
  },
  {
    n: 'II', key: 'source', title: 'Source',
    kicker: 'The browser clipper',
    body: 'A one-tap clipper that lives in your browser. Clip a sofa from Wayfair, a lamp from a boutique, a rug from Etsy — every product lands in your library with image and link intact.',
    meta: 'Chrome day one · Safari next',
    icon: 'Source',
    img:  'https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?w=900&q=80&auto=format&fit=crop',
    img2: 'https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=600&q=80&auto=format&fit=crop',
    swatch: 'var(--accent)',
    bg: 'linear-gradient(180deg, #14100e 0%, #1a120e 100%)',
    quote: '“Friction kills the daily habit. Clipping doesn’t.”',
  },
  {
    n: 'III', key: 'design', title: 'Design',
    kicker: 'The canvas builder',
    body: 'Upload a photo of your actual room as the canvas — or use a curated scene. Place products on top of your real space. Background removal handled. Pin. Link. Done.',
    meta: 'Mobile-native · Real room photos',
    icon: 'Design',
    img:  'https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?w=900&q=80&auto=format&fit=crop',
    img2: 'https://images.unsplash.com/photo-1540574163026-643ea20ade25?w=600&q=80&auto=format&fit=crop',
    swatch: 'var(--accent-2)',
    bg: 'linear-gradient(180deg, #1a120e 0%, #0f0c0b 100%)',
    quote: '“Real rooms convert harder than showrooms.”',
  },
  {
    n: 'IV', key: 'share', title: 'Share',
    kicker: 'The room card',
    body: 'Every finished room becomes a hosted micro-page at its own URL. It travels — embeds on blogs, shines on Pinterest, lives in emails. The card is the marketing.',
    meta: 'Hosted URL · Embed anywhere',
    icon: 'Share',
    img:  'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=900&q=80&auto=format&fit=crop',
    img2: 'https://images.unsplash.com/photo-1616594039964-ae9021a400a0?w=600&q=80&auto=format&fit=crop',
    swatch: 'var(--brass-2)',
    bg: 'linear-gradient(180deg, #0f0c0b 0%, #14110d 100%)',
    quote: '“The card is the channel. The creator is the network.”',
  },
  {
    n: 'V', key: 'earn', title: 'Earn',
    kicker: 'Your affiliate links',
    body: 'Bring your own affiliate accounts. Every hotspot fires the link you choose. A $2,000 sofa earns $200–$600 per checkout — the math home decor allows that fashion doesn’t.',
    meta: 'Your links · Your commissions',
    icon: 'Earn',
    img:  'https://images.unsplash.com/photo-1540574163026-643ea20ade25?w=900&q=80&auto=format&fit=crop',
    img2: 'https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?w=600&q=80&auto=format&fit=crop',
    swatch: 'var(--accent)',
    bg: 'linear-gradient(180deg, #14110d 0%, #1c1410 100%)',
    quote: '“Earn from the taste you already have.”',
  },
];

function PillarRow({p, i}){
  const IconC = Icon[p.icon];
  const reverse = i % 2 === 1;
  return (
    <article style={{
      display:'grid',
      gridTemplateColumns: reverse ? '1.1fr 1fr 120px' : '120px 1fr 1.1fr',
      gap:48,
      alignItems:'stretch',
      padding:'80px 0',
      borderTop:'1px solid var(--line)',
      position:'relative',
    }}>
      {/* numeral column */}
      <div style={{
        display:'flex', flexDirection:'column', alignItems:'flex-start', gap:18,
        order: reverse ? 3 : 0,
      }}>
        <span className="serif" style={{
          fontStyle:'italic', fontWeight:300,
          fontSize:84, lineHeight:0.85,
          background:`linear-gradient(180deg, ${p.swatch} 0%, var(--brass) 100%)`,
          WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent',
          backgroundClip:'text',
          letterSpacing:'-0.04em',
        }}>{p.n}</span>
        <span style={{color: p.swatch, opacity:0.6}}><IconC size={22}/></span>
        <div className="mono" style={{
          writingMode:'vertical-rl', transform:'rotate(180deg)',
          color:'var(--muted-2)', marginTop:'auto', paddingTop:60,
        }}>pillar · 0{i+1} of 05</div>
      </div>

      {/* text column */}
      <div style={{order: reverse ? 2 : 1, paddingTop:14}}>
        <div className="mono" style={{marginBottom:18, color:p.swatch}}>{p.kicker}</div>
        <h3 className="serif" style={{
          margin:0, fontWeight:300, fontSize:'clamp(64px, 8vw, 104px)', lineHeight:0.92,
          letterSpacing:'-0.035em',
        }}>
          {p.title}
          <span style={{color:p.swatch}}>.</span>
        </h3>

        {/* pull quote */}
        <blockquote style={{
          margin:'32px 0 0', paddingLeft:18,
          borderLeft:`2px solid ${p.swatch}`,
          maxWidth:480,
        }}>
          <p className="serif" style={{
            margin:0, fontStyle:'italic', fontWeight:300,
            fontSize:20, lineHeight:1.4, color:'var(--ink-2)',
          }}>{p.quote}</p>
        </blockquote>

        <p style={{
          margin:'28px 0 0', maxWidth:480,
          color:'var(--ink-2)', fontSize:16, lineHeight:1.65, fontWeight:300,
        }}>{p.body}</p>

        <div className="mono" style={{
          marginTop:32, color:'var(--muted-2)',
          paddingTop:14, borderTop:'1px dotted rgba(245,238,225,0.15)',
          maxWidth:480,
        }}>{p.meta}</div>
      </div>

      {/* image column with layered second image */}
      <div style={{order: reverse ? 1 : 2, position:'relative', minHeight:520}}>
        <div style={{
          position:'absolute', inset:0,
          background: p.bg, transform:`translate(${reverse ? '20px' : '-20px'}, 20px)`,
          border:'1px solid var(--line)',
        }}/>
        <div style={{
          position:'relative', aspectRatio:'4/5', overflow:'hidden',
          background:'#1a1714',
          boxShadow:'0 30px 80px rgba(0,0,0,0.45)',
        }}>
          <img src={p.img} alt="" style={{
            width:'100%', height:'100%', objectFit:'cover',
            filter:'saturate(0.95) brightness(0.92)',
          }}/>
          {/* color tint */}
          <div style={{
            position:'absolute', inset:0, pointerEvents:'none',
            background:`linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55)), radial-gradient(80% 60% at 80% 20%, ${cssMix(p.swatch, 0.18)}, transparent 60%)`,
            mixBlendMode:'normal',
          }}/>
          {/* corner caption */}
          <div style={{
            position:'absolute', left:14, bottom:14,
            display:'flex', alignItems:'center', gap:10,
          }}>
            <span style={{width:8,height:8,borderRadius:99, background:p.swatch}}/>
            <span className="mono" style={{fontSize:10, color:'var(--ink)'}}>plate {p.n.toLowerCase()} · {p.title.toLowerCase()}</span>
          </div>
        </div>

        {/* small overlapping inset image */}
        <div style={{
          position:'absolute',
          [reverse ? 'left' : 'right']: -36,
          bottom:-40, width:160, height:200,
          border:'1px solid var(--brass)',
          background:'#0c0b0a',
          boxShadow:'0 20px 50px rgba(0,0,0,0.5)',
          transform: reverse ? 'rotate(3deg)' : 'rotate(-3deg)',
          overflow:'hidden',
        }}>
          <img src={p.img2} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
        </div>
      </div>
    </article>
  );
}

// helper — turns a CSS color into an rgba-ish overlay (only used with our named vars)
function cssMix(_v, _alpha){
  // crude fallback — use a neutral warm wash
  return `rgba(217,119,87,${_alpha})`;
}

function Pillars(){
  return (
    <section id="pillars" style={{padding:'160px 0 120px', position:'relative'}}>
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, marginBottom:96, alignItems:'end'}}>
          <div>
            <span className="mono eyebrow">The five movements</span>
            <h2 className="serif" style={{
              margin:'24px 0 0', fontWeight:300,
              fontSize:'clamp(48px, 7vw, 104px)', lineHeight:0.95, letterSpacing:'-0.035em',
            }}>
              A home platform <br/>
              <span style={{
                fontStyle:'italic',
                background:'linear-gradient(180deg, var(--brass-2), var(--brass))',
                WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text',
              }}>built around five actions.</span>
            </h2>
          </div>
          <div style={{alignSelf:'end'}}>
            <p style={{margin:0, color:'var(--ink-2)', fontSize:16, lineHeight:1.65, maxWidth:440, fontWeight:300}}>
              Not a mood board. Not a furniture catalog. Not a professional tool.
              The same power interior designers have — plan, source, design, share, earn —
              handed to anyone with taste and a phone.
            </p>
            <div className="mono" style={{marginTop:24, color:'var(--brass)'}}>
              ⟶ five chapters · forty-eight pages
            </div>
          </div>
        </div>

        {PILLARS.map((p,i)=><PillarRow key={p.key} p={p} i={i}/>)}
      </div>
    </section>
  );
}
window.Pillars = Pillars;