/* global React */

function SvcGlyph({ kind }) {
  if (kind === 'rescue') {
    // Animated heartbeat / monitor line
    return (
      <div className="svc-glyph">
        <svg viewBox="0 0 320 130" width="100%" height="100%" preserveAspectRatio="none">
          <defs>
            <linearGradient id="hb" x1="0" x2="1">
              <stop offset="0" stopColor="var(--accent)" stopOpacity="0"/>
              <stop offset="0.5" stopColor="var(--accent)" stopOpacity="1"/>
              <stop offset="1" stopColor="var(--accent)" stopOpacity="0"/>
            </linearGradient>
          </defs>
          {[0,1,2,3,4].map(i => (
            <line key={i} x1="0" x2="320" y1={20 + i * 22} y2={20 + i * 22} stroke="var(--line-soft)" strokeWidth="1"/>
          ))}
          <path d="M0 65 L60 65 L75 65 L80 40 L88 90 L100 65 L160 65 L175 65 L180 25 L188 105 L200 65 L260 65 L275 65 L280 50 L288 80 L300 65 L320 65"
                stroke="var(--accent)" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round">
            <animate attributeName="stroke-dasharray" values="0 800;400 400;800 0" dur="3.5s" repeatCount="indefinite"/>
          </path>
          <circle cx="180" cy="65" r="3" fill="var(--accent)">
            <animate attributeName="opacity" values="1;0;1" dur="1.4s" repeatCount="indefinite"/>
          </circle>
        </svg>
      </div>
    );
  }
  if (kind === 'assurance') {
    // Stacked bars assembling into envelope
    return (
      <div className="svc-glyph">
        <svg viewBox="0 0 320 130" width="100%" height="100%" preserveAspectRatio="none">
          {[0,1,2,3,4,5].map(i => (
            <rect key={i} x={28 + i*46} y={50 + (i%2)*8} width="34" height={28 - (i%2)*8} fill="none" stroke="var(--accent)" strokeWidth="1" opacity={0.3 + (i*0.1)}>
              <animate attributeName="y" values={`${50 + (i%2)*8};${40 + (i%2)*4};${50 + (i%2)*8}`} dur={`${2.4 + i*0.2}s`} repeatCount="indefinite"/>
            </rect>
          ))}
          <path d="M120 92 L200 92 L200 110 L120 110 Z M120 92 L160 105 L200 92" stroke="var(--accent)" strokeWidth="1.4" fill="none" strokeLinejoin="round"/>
        </svg>
      </div>
    );
  }
  // 'triage' — connected nodes / closed loop
  return (
    <div className="svc-glyph">
      <svg viewBox="0 0 320 130" width="100%" height="100%" preserveAspectRatio="none">
        <circle cx="60" cy="40" r="6" fill="var(--accent)"/>
        <circle cx="160" cy="25" r="6" fill="none" stroke="var(--accent)" strokeWidth="1.4"/>
        <circle cx="260" cy="50" r="6" fill="none" stroke="var(--accent)" strokeWidth="1.4"/>
        <circle cx="220" cy="100" r="6" fill="none" stroke="var(--accent)" strokeWidth="1.4"/>
        <circle cx="100" cy="100" r="6" fill="var(--accent)"/>
        <path d="M60 40 L160 25 L260 50 L220 100 L100 100 Z" stroke="var(--accent)" strokeWidth="1" fill="none" strokeDasharray="3 3">
          <animate attributeName="stroke-dashoffset" from="0" to="-12" dur="3s" repeatCount="indefinite"/>
        </path>
        <circle r="3" fill="var(--accent)">
          <animateMotion dur="4s" repeatCount="indefinite" path="M60 40 L160 25 L260 50 L220 100 L100 100 Z"/>
        </circle>
      </svg>
    </div>
  );
}

function Services() {
  const cards = [
    { n: '01', kind: 'rescue',    name: 'Turnover Rescue',   tag: 'Pri-1',
      body: 'Watches your property management system and operations tools every 30 minutes, sends automated confirmation requests to cleaners and vendors, and escalates immediately if something goes quiet.' },
    { n: '02', kind: 'assurance', name: 'Owner Assurance',   tag: 'Pri-2',
      body: 'Pulls together what happened at each property and turns it into a clear owner update automatically. Owners stop calling because the answer is already in their inbox.' },
    { n: '03', kind: 'triage',    name: 'Guest Issue Triage', tag: 'Pri-3',
      body: 'Connects guest complaints to an actual resolution loop across your property management system, operations tools, vendor, and owner. Not just an AI reply — a closed ticket.' },
  ];
  return (
    <section id="services">
      <span className="section-mark">§ 06 / Services</span>
      <div className="wrap">
        <Reveal><span className="eyebrow">Three agents, deployed in order</span></Reveal>
        <Reveal delay={80}>
          <h2 className="h-section" style={{ marginTop: 22 }}>
            What we <em>build</em>
          </h2>
        </Reveal>
        <div className="svc-grid">
          {cards.map((c, i) => (
            <Reveal key={c.n} delay={100 + i * 100}>
              <div className="svc-card">
                <div className="svc-meta">
                  <span>Agent · {c.n}</span>
                  <span>{c.tag}</span>
                </div>
                <SvcGlyph kind={c.kind} />
                <div className="svc-name">{c.name}</div>
                <p className="svc-desc">{c.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={200}>
          <p className="svc-note">
            These are just common examples. Every operation is different — we&apos;d love to hear about the specific pain points or bottlenecks in your workflow that you&apos;d want to automate.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

window.Services = Services;