// Services "bento" — Apple-store-ish feature tiles.
// Two rows: (1) hero feature tile (Water damage, dark) + Carpet tile.
// (2) 3-up row of remaining tiles. Each tile is a card with big title, sub, CTA.

function FeatureTile({ tile }) {
  const [ref, inView] = useInView();
  const { bg, ink, inkMuted, eyebrow, title, sub, cta, ctaColor, visual, span, minH, align } = tile;
  return (
    <div
      ref={ref}
      className="lift"
      style={{
        gridColumn: span || 'auto',
        background: bg,
        color: ink,
        borderRadius: 'var(--radius-xl)',
        overflow: 'hidden',
        position: 'relative',
        minHeight: minH || 460,
        display: 'flex',
        flexDirection: 'column',
        opacity: inView ? 1 : 0,
        transform: inView ? 'translateY(0)' : 'translateY(24px)',
        transition: 'opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease',
      }}
    >
      <div style={{
        padding: '44px 40px 32px',
        textAlign: align || 'center',
        display: 'flex', flexDirection: 'column',
        alignItems: align === 'left' ? 'flex-start' : 'center',
        zIndex: 2,
      }}>
        <div style={{
          fontSize: 12, fontWeight: 600, letterSpacing: '0.04em',
          textTransform: 'uppercase', color: inkMuted, marginBottom: 10,
        }}>{eyebrow}</div>
        <h3 className="h-2" style={{ margin: 0, maxWidth: 520, color: ink }}>{title}</h3>
        {sub && (
          <p style={{
            marginTop: 12, marginBottom: 20, maxWidth: 460,
            fontSize: 17, lineHeight: 1.4, color: inkMuted,
            letterSpacing: '-0.01em',
          }}>{sub}</p>
        )}
        {cta && (
          <a href={cta.href} className="link-chev" style={{ color: ctaColor, display:'inline-flex', alignItems:'center', gap:4, marginTop: sub ? 0 : 14 }}>
            {cta.label} <Icon.Chevron />
          </a>
        )}
      </div>

      <div className="zoom-host" style={{ flex: 1, position: 'relative', minHeight: 160 }}>
        {visual}
      </div>
    </div>
  );
}

// --- Visual renderers for each tile (SVG/CSS-only, no AI-looking illustrations)
function VisCarpet() {
  return (
    <div style={{ position:'absolute', inset: 0, overflow: 'hidden' }}>
      <svg viewBox="0 0 600 320" width="100%" height="100%" preserveAspectRatio="xMidYMax slice">
        <defs>
          <linearGradient id="vcarpetBg" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#f5f5f7"/>
            <stop offset="1" stopColor="#e6e6ea"/>
          </linearGradient>
        </defs>
        <rect width="600" height="320" fill="url(#vcarpetBg)"/>
        {/* Perspective carpet */}
        <polygon points="140,320 460,320 520,120 80,120" fill="#c9cdd4"/>
        <polygon points="140,320 460,320 520,120 80,120" fill="#b9bec6" opacity="0.35"
          style={{ clipPath: 'inset(0)' }}/>
        {Array.from({length: 10}).map((_,i) => (
          <line key={i}
            x1={80 + (440/10)*i} y1={120}
            x2={140 + (320/10)*i} y2={320}
            stroke="#a9afb9" strokeWidth="0.8" opacity="0.5"/>
        ))}
        {/* Clean pass overlay */}
        <polygon points="230,320 370,320 400,200 200,200" fill="#ffffff" opacity="0.55"/>
      </svg>
    </div>
  );
}

function VisWater() {
  return (
    <div style={{ position:'absolute', inset: 0, overflow: 'hidden' }}>
      <svg viewBox="0 0 800 340" width="100%" height="100%" preserveAspectRatio="xMidYMax slice">
        <defs>
          <radialGradient id="vwaterG" cx="50%" cy="100%" r="70%">
            <stop offset="0" stopColor="#2a6b94" stopOpacity="0.5"/>
            <stop offset="1" stopColor="#2a6b94" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <rect width="800" height="340" fill="url(#vwaterG)"/>
        {[0,1,2,3,4].map((i) => (
          <circle key={i}
            cx="400" cy="320" r={50}
            fill="none" stroke="#6ba8cc" strokeWidth="1.2">
            <animate attributeName="r" from="40" to={260 + i*20} dur="4s" begin={`${i*0.8}s`} repeatCount="indefinite"/>
            <animate attributeName="opacity" from="0.7" to="0" dur="4s" begin={`${i*0.8}s`} repeatCount="indefinite"/>
          </circle>
        ))}
        {/* Droplet */}
        <g style={{ transformOrigin: '400px 210px', animation: 'floaty 3.6s ease-in-out infinite' }}>
          <path d="M400 160 C 370 200, 360 230, 400 260 C 440 230, 430 200, 400 160 Z"
            fill="#7dc3e8" opacity="0.92"/>
          <path d="M392 180 C 386 196, 386 210, 396 220" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" opacity="0.8"/>
        </g>
      </svg>
    </div>
  );
}

function VisTile() {
  return (
    <div style={{ position:'absolute', inset: 0, overflow: 'hidden', display:'grid', placeItems:'center' }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(6, 1fr)',
        gap: 6,
        width: '80%',
        aspectRatio: '3 / 2',
        transform: 'perspective(900px) rotateX(52deg) rotateZ(-6deg)',
        transformOrigin: 'center 70%',
      }}>
        {Array.from({length: 24}).map((_,i) => (
          <div key={i} style={{
            background: i === 11 || i === 12 ? '#e8eef3' : '#d3d9e0',
            borderRadius: 2,
            boxShadow: '0 1px 0 #bec5cd',
          }}/>
        ))}
      </div>
    </div>
  );
}

function VisAir() {
  return (
    <div style={{ position:'absolute', inset: 0, overflow: 'hidden' }}>
      <svg viewBox="0 0 600 320" width="100%" height="100%" preserveAspectRatio="xMidYMax slice">
        {/* Duct grille */}
        <rect x="190" y="70" width="220" height="160" rx="10" fill="#eceff3" stroke="#c4c9d1" strokeWidth="1"/>
        {Array.from({length: 7}).map((_,i)=>(
          <rect key={i} x="206" y={88 + i*20} width="188" height="8" rx="3" fill="#cfd4dc"/>
        ))}
        {/* Airflow curves — animated drift */}
        {[0,1,2,3,4].map(i => (
          <path key={i}
            d={`M ${130 - i*10} ${260 - i*20} Q ${300} ${200 - i*30}, ${470 + i*10} ${260 - i*20}`}
            stroke="#9aa4b2" strokeWidth="1.2" fill="none" opacity={0.6 - i*0.1}
            strokeDasharray="8 6"
          >
            <animate attributeName="stroke-dashoffset" from="0" to="-140" dur={`${3 + i*0.4}s`} repeatCount="indefinite"/>
          </path>
        ))}
      </svg>
    </div>
  );
}

function VisProperty() {
  return (
    <div style={{ position:'absolute', inset: 0, overflow: 'hidden' }}>
      <svg viewBox="0 0 600 320" width="100%" height="100%" preserveAspectRatio="xMidYMax slice">
        {/* Building silhouettes */}
        <rect x="60" y="120" width="90" height="200" fill="#d9dde3"/>
        <rect x="160" y="80" width="110" height="240" fill="#c9cfd7"/>
        <rect x="280" y="140" width="80" height="180" fill="#d9dde3"/>
        <rect x="370" y="60" width="130" height="260" fill="#bdc4cc"/>
        <rect x="510" y="130" width="60" height="190" fill="#d9dde3"/>
        {/* Windows */}
        {[[170,100],[200,100],[230,100],[170,130],[200,130],[230,130],[170,160],[200,160],[230,160],[170,190],[200,190],[230,190],[170,220],[200,220],[230,220]].map(([x,y],i)=>(
          <rect key={'a'+i} x={x} y={y} width="18" height="18" fill="#8e95a0"/>
        ))}
        {[[385,80],[420,80],[455,80],[385,115],[420,115],[455,115],[385,150],[420,150],[455,150],[385,185],[420,185],[455,185],[385,220],[420,220],[455,220],[385,255],[420,255],[455,255]].map(([x,y],i)=>(
          <rect key={'b'+i} x={x} y={y} width="20" height="20" fill="#868d98"/>
        ))}
      </svg>
    </div>
  );
}

function Services() {
  const tiles = [
    {
      key: 'water',
      span: '1 / span 6',
      minH: 560,
      bg: 'linear-gradient(180deg, #0b1f2e 0%, #143447 100%)',
      ink: '#ffffff',
      inkMuted: 'rgba(255,255,255,0.72)',
      ctaColor: '#5fb6ea',
      eyebrow: '24/7 response',
      title: 'Emergency water damage.\nOn-site, fast.',
      sub: 'Extraction, pad removal, mildewcide, deodorizing and sanitizing. Blowers, dehumidifiers, ozone and air scrubbers billed per day on-site.',
      cta: { label: 'See response details', href: 'Services.html#water' },
      visual: <VisWater/>,
      align: 'center',
    },
    {
      key: 'carpet',
      span: '7 / span 6',
      minH: 560,
      bg: 'var(--bg-soft)',
      ink: 'var(--ink)',
      inkMuted: 'var(--muted)',
      ctaColor: 'var(--link)',
      eyebrow: 'Carpet',
      title: 'Cleaned, stretched,\nstain-treated.',
      sub: 'Pre-condition, hot-water extraction, deodorizer. Deep-stain, re-seam and pet / urine treatments priced as add-ons.',
      cta: { label: 'See carpet services', href: 'Services.html#carpet' },
      visual: <VisCarpet/>,
      align: 'center',
    },
    {
      key: 'tile',
      span: '1 / span 4',
      minH: 460,
      bg: '#eef1f5',
      ink: 'var(--ink)',
      inkMuted: 'var(--muted)',
      ctaColor: 'var(--link)',
      eyebrow: 'Tile & vinyl',
      title: 'Hard floors,\nrestored.',
      sub: 'Grout degrease and extraction. Vinyl strip and re-coat.',
      cta: { label: 'Learn more', href: 'Services.html#tile' },
      visual: <VisTile/>,
    },
    {
      key: 'air',
      span: '5 / span 4',
      minH: 460,
      bg: '#f5f5f7',
      ink: 'var(--ink)',
      inkMuted: 'var(--muted)',
      ctaColor: 'var(--link)',
      eyebrow: 'A/C & dryer vents',
      title: 'Clear airflow,\ndeodorized.',
      sub: 'Supply and return ducts, grille paint, dryer-vent lines — per unit or full property.',
      cta: { label: 'Learn more', href: 'Services.html#duct' },
      visual: <VisAir/>,
    },
    {
      key: 'property',
      span: '9 / span 4',
      minH: 460,
      bg: '#111113',
      ink: '#fff',
      inkMuted: 'rgba(255,255,255,0.7)',
      ctaColor: '#5fb6ea',
      eyebrow: 'Full-property',
      title: 'Property-wide\nservice.',
      sub: 'A/C line flushes, dryer-vent campaigns and pool / deck furniture.',
      cta: { label: 'Request estimate', href: '#quote' },
      visual: <VisProperty/>,
    },
  ];

  return (
    <section id="services" style={{ padding: '72px 0 32px', background: 'var(--bg)' }}>
      <div className="wrap-wide" style={{ marginBottom: 28 }}>
        <div className="eyebrow">Services</div>
        <h2 className="h-1" style={{ margin: '8px 0 0', maxWidth: 820 }}>
          Everything a turn needs. <span style={{ color: 'var(--muted)' }}>Priced per property.</span>
        </h2>
      </div>

      <div className="wrap-wide">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(12, 1fr)',
          gap: 16,
        }} className="tile-grid">
          {tiles.map(t => (
            <div key={t.key} style={{ gridColumn: t.span }}>
              <FeatureTile tile={{ ...t, span: undefined }} />
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .tile-grid > div { grid-column: 1 / -1 !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Services });