// HausWhy — values / pillars section

const pillars = [
  {
    icon: (
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
        <path d="M4 22V10l10-6 10 6v12" stroke="#899e7b" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
        <rect x="10" y="16" width="8" height="6" rx="1" stroke="#899e7b" strokeWidth="1.8"/>
        <path d="M14 10v3" stroke="#899e7b" strokeWidth="1.8" strokeLinecap="round"/>
      </svg>
    ),
    eyebrow: 'Custom from the first sketch',
    title: 'Drawn to your room.',
    body: 'We start with your dimensions, your ceiling, your floor, your aesthetic — never a catalogue. Every Haus install is one-of-one.',
  },
  {
    icon: (
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
        <circle cx="14" cy="14" r="10" stroke="#899e7b" strokeWidth="1.8"/>
        <path d="M14 8v6l4 2" stroke="#899e7b" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M7 22l2-2" stroke="#899e7b" strokeWidth="1.8" strokeLinecap="round"/>
        <path d="M21 22l-2-2" stroke="#899e7b" strokeWidth="1.8" strokeLinecap="round"/>
      </svg>
    ),
    eyebrow: 'Grows with your child',
    title: 'From two to twelve.',
    body: 'Reconfigurable holds, adjustable heights, modular elements. The wall your toddler learns on becomes the wall your eight-year-old shows off on.',
  },
  {
    icon: (
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
        <path d="M6 20l4-8 4 5 3-4 5 7" stroke="#899e7b" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
        <rect x="3" y="4" width="22" height="16" rx="3" stroke="#899e7b" strokeWidth="1.8"/>
      </svg>
    ),
    eyebrow: 'Materials we\'d use in our own homes',
    title: 'Birch, rope, steel.',
    body: 'FSC-certified birch plywood, natural fibre ropes, powder-coated steel hardware. Materials that age beautifully because they\'re chosen to.',
  },
  {
    icon: (
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
        <path d="M14 4l2.5 7.5H24l-6.5 4.7 2.5 7.5L14 19l-6 4.7 2.5-7.5L4 11.5h7.5z" stroke="#899e7b" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
    eyebrow: 'Movement that matters',
    title: 'Less screen, more climb.',
    body: 'Active play builds strength, balance, and self-trust. Every element we draw is shaped by how children actually develop — not by what photographs well.',
  },
];

const PillarCard = ({ pillar, visible, delay }) => (
  <div style={{
    padding:'clamp(24px,2.5vw,36px)', borderRadius:20, background:'#fffaf3',
    border:'1px solid #e8d9c5',
    opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(16px)',
    transition: `opacity 600ms ${delay}ms cubic-bezier(0.25,0.46,0.45,0.94), transform 600ms ${delay}ms cubic-bezier(0.25,0.46,0.45,0.94)`,
  }}>
  <div style={{marginBottom:20}}>{pillar.icon}</div>
  <div style={{fontFamily:"'Montserrat',sans-serif", fontSize:10, fontWeight:600, letterSpacing:'0.14em', textTransform:'uppercase', color:'#899e7b', marginBottom:10}}>{pillar.eyebrow}</div>
  <div style={{fontFamily:"'Fonphoria',serif", fontWeight:600, fontSize:'clamp(17px,1.5vw,21px)', lineHeight:1.25, color:'#1f1f1f', marginBottom:12}}>{pillar.title}</div>
  <p style={{fontFamily:"'Montserrat',sans-serif", fontWeight:300, fontSize:14, lineHeight:1.8, color:'#5a5248', margin:0, textWrap:'pretty'}}>{pillar.body}</p>
  </div>
);

const HausWhy = () => {
  const ref = React.useRef(); const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVis(true); obs.disconnect(); }}, {threshold:0.12});
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <section id="about" style={{background:'#fffaf3', padding:'clamp(64px,8vw,120px) clamp(20px,5vw,48px)'}}>
      <div style={{maxWidth:1280, margin:'0 auto'}}>
        <div ref={ref} style={{textAlign:'center', marginBottom:56,
          opacity:vis?1:0, transform:vis?'none':'translateY(18px)', transition:'opacity 600ms, transform 600ms cubic-bezier(0.25,0.46,0.45,0.94)'}}>
          <div style={{fontFamily:"'Railey',cursive", fontWeight:400, fontSize:22, color:'#899e7b', marginBottom:12, letterSpacing:'0.01em'}}>Why Haus & Play</div>
          <h2 style={{fontFamily:"'Fonphoria',serif", fontWeight:700, fontSize:'clamp(28px,3.5vw,48px)', lineHeight:1.05, letterSpacing:'-0.02em', color:'#1f1f1f', maxWidth:560, margin:'0 auto', textWrap:'pretty'}}>
            Built around your room. Designed around your kids.
          </h2>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(260px,1fr))', gap:16}}>
          {pillars.map((p, i) => <PillarCard key={i} pillar={p} visible={vis} delay={i*80} />)}
        </div>
      </div>
    </section>
  );
};
Object.assign(window, { HausWhy, PillarCard });