// Owners — quote estimator + dashboard preview, on abyss background
// This visually "sells" the $399/mo business tier.

function OwnersSection() {
  // Click-through estimator — 3 steps, auto-cycling
  const [stage, setStage] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setStage(s => (s + 1) % 3), 3400);
    return () => clearInterval(id);
  }, []);

  // Step 1 — help topic tiles
  const topics = [
    { t: 'Plumbing Repair',       s: 'Leaks, clogs, broken pipes, fixture issues',
      icon: (<path d="M5 12 l3-3 m-3 3 l-2 2 a2 2 0 0 0 3 3 l2-2 m-3-3 l3 3 m0 0 l5-5 m-5 5 l3 3 a2 2 0 0 0 3-3 l-3-3 m0 0 l2-2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" fill="none" />) },
    { t: 'Bathroom / Kitchen Reno', s: 'Full plumbing for renovation builds', selected: true,
      icon: (<path d="M4 10 h16 M6 10 v8 a2 2 0 0 0 2 2 h8 a2 2 0 0 0 2-2 v-8 M8 10 v-3 a4 4 0 0 1 8 0 v3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" fill="none" />) },
    { t: 'New Construction Rough-In', s: 'Supply lines, drains, venting for new builds',
      icon: (<path d="M3 12 h18 M8 12 v-4 M16 12 v-4 M12 12 v8 M6 20 h12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" fill="none" />) },
    { t: 'Heating System',         s: 'Furnace, baseboard, or hydronic heating',
      icon: (<path d="M12 3 c 2 3 -1 5 0 7 c 1 2 3 4 3 7 a 5 5 0 0 1 -10 0 c 0 -3 3 -4 3 -7 c 1 -2 -1 -3 0 -4 c 1 -1 2 -2 4 -3 Z" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" fill="none" />) },
    { t: 'Water Heater',           s: 'Repair, replacement, or new install',
      icon: (<path d="M12 4 c 4 5 6 7 6 11 a 6 6 0 0 1 -12 0 c 0 -4 2 -6 6 -11 Z" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" fill="none" />) },
    { t: 'Not Sure / Other',       s: 'I need a professional opinion',
      icon: (<g stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" fill="none"><circle cx="12" cy="12" r="8"/><path d="M9.5 10 a2.5 2.5 0 0 1 5 0 c 0 1.5 -2.5 1.8 -2.5 3.5"/><circle cx="12" cy="16.5" r="0.4" fill="currentColor"/></g>) },
  ];

  const leads = [
    { name: 'J. Thornbury',     job: 'Furnace replacement · M',     quote: '$4.8K–$6.2K', when: '4m ago',    s: 'New' },
    { name: 'Marisol Herrera',  job: 'AC install + ductwork · L',   quote: '$7.5K–$11K',  when: '22m ago',   s: 'Replied' },
    { name: 'Owen McCafferty',  job: 'Water heater swap · S',        quote: '$1.2K–$1.8K', when: '1h ago',    s: 'Scheduled' },
    { name: 'Priya Natarajan',  job: 'Bathroom rough-in · M',        quote: '$3.5K–$5.2K', when: '3h ago',    s: 'New' },
    { name: 'Erik Lindqvist',   job: 'Boiler service + repair · S',  quote: '$850–$1.4K',  when: 'Yesterday', s: 'Closed' },
  ];

  const statusColor = (s) => {
    if (s === 'New') return 'var(--summit)';
    if (s === 'Replied') return 'var(--alpine-400)';
    if (s === 'Scheduled') return 'var(--alpine-300)';
    return 'rgba(245,240,235,0.35)';
  };

  return (
    <section id="owners" className="relative abyss-band py-24 md:py-32 overflow-hidden" data-nav-dark="true">
      <div className="bg-grid-dark" />
      <div className="noise" />
      {/* Faint mountain silhouette background */}
      <svg className="absolute inset-x-0 bottom-0 w-full" viewBox="0 0 1600 400" preserveAspectRatio="xMidYMax slice" style={{ opacity: 0.15 }}>
        <path d="M0 400 L150 250 L280 320 L420 180 L540 270 L700 140 L860 260 L1020 210 L1180 290 L1340 230 L1500 300 L1600 260 L1600 400 Z" fill="#3A8CA8" opacity="0.5" />
        <path d="M0 400 L120 310 L240 360 L380 270 L520 330 L680 240 L830 310 L980 280 L1140 340 L1300 290 L1460 340 L1600 310 L1600 400 Z" fill="#154B63" />
      </svg>

      <div className="max-w-[1680px] mx-auto px-6 md:px-10 relative">
        <div className="grid grid-cols-1 lg:grid-cols-[0.9fr_1.1fr] gap-14 lg:gap-24 items-start">
          {/* Left copy */}
          <div className="lg:sticky lg:top-28">
            <div className="flex items-center gap-4 mb-6">
              <span className="h-px w-10" style={{ background: 'var(--glacier)' }} />
              <span className="mono-label" style={{ color: 'rgba(245,240,235,0.6)' }}>For owners · the Business tier</span>
            </div>
            <h2 className="font-display font-extrabold mb-8" style={{ fontSize: 'clamp(2.75rem, 6vw, 5.5rem)', lineHeight: 1.02, letterSpacing: '-0.018em', color: 'var(--parchment)' }}>
              A site that <span className="italic font-normal" style={{ color: 'var(--glacier)' }}>quotes</span> for you
              <span style={{ color: 'rgba(245,240,235,0.35)' }}>.</span>
            </h2>
            <p className="font-body mb-8 max-w-[50ch]" style={{ fontSize: '1.08rem', lineHeight: 1.6, color: 'rgba(245,240,235,0.72)' }}>
              Your customers answer three to six short questions. They get an honest range.
              You get a lead, in a dashboard, with the answers attached. No more phone tag for the first estimate.
            </p>

            <ul className="space-y-4 mb-10">
              {[
                'Estimator tuned to how you actually price',
                'Owner dashboard, secure login, no apps to install',
                'Lead status, notes, automated follow-ups',
                'Works on the truck, on the phone, anywhere',
              ].map((t, i) => (
                <li key={i} className="flex items-start gap-3 font-body" style={{ fontSize: '1rem', color: 'rgba(245,240,235,0.85)' }}>
                  <span className="mt-1.5 shrink-0" style={{ color: 'var(--glacier)' }}><CheckTrend size={14} /></span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>

            <div className="flex items-center gap-6 flex-wrap">
              <a href="#contact" className="inline-flex items-center gap-3 pl-2 pr-6 py-2 rounded-full font-display font-medium transition-colors"
                 style={{ background: 'var(--parchment)', color: 'var(--abyss)', fontSize: '0.95rem' }}>
                <span className="w-9 h-9 rounded-full inline-flex items-center justify-center" style={{ background: 'var(--summit)', color: 'var(--parchment)' }}>
                  <ArrowRightShort />
                </span>
                Start a Business tier
              </a>
              <span className="font-display italic font-light" style={{ fontSize: '1rem', color: 'rgba(245,240,235,0.65)' }}>
                Free design · $399/mo after launch
              </span>
            </div>
          </div>

          {/* Right preview stack */}
          <div className="relative">
            {/* Estimator card (visitor side) — click-through form */}
            <div className="rounded-3xl p-6 md:p-7 relative overflow-hidden" style={{
              background: 'rgba(245, 240, 235, 0.96)',
              color: 'var(--abyss)',
              boxShadow: '0 40px 80px -30px rgba(0,0,0,0.5)',
              border: '1px solid rgba(245,240,235,0.7)',
            }}>
              {/* Top progress bar */}
              <div className="absolute top-0 left-0 right-0 h-[3px] bg-[rgba(26,36,54,0.06)]">
                <div className="h-full transition-all duration-700" style={{ width: `${((stage + 1) / 3) * 100}%`, background: 'linear-gradient(90deg, var(--alpine-500), var(--summit))' }} />
              </div>

              <div className="flex items-center justify-between mb-5 mt-1">
                <div className="flex items-center gap-2">
                  <div className="flex items-center gap-1">
                    <span className="w-2.5 h-2.5 rounded-full" style={{ background: '#E06C5A' }} />
                    <span className="w-2.5 h-2.5 rounded-full" style={{ background: '#F2BBA0' }} />
                    <span className="w-2.5 h-2.5 rounded-full" style={{ background: '#9CCFE2' }} />
                  </div>
                  <span className="mono-label ml-3" style={{ color: 'rgba(26,36,54,0.45)' }}>peakcomfortmechanical.com/estimate</span>
                </div>
                <span className="chip">Visitor view</span>
              </div>

              <div className="flex items-center justify-between mb-5">
                <button className="inline-flex items-center gap-1.5 font-display" style={{ fontSize: '0.9rem', color: 'rgba(26,36,54,0.6)' }}>
                  <svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M12 7H2M6 3L2 7L6 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  Back
                </button>
                <span className="mono-label" style={{ color: 'rgba(26,36,54,0.45)' }}>Step {stage + 1} / 3</span>
              </div>

              <div style={{ position: 'relative', height: '400px', overflow: 'hidden' }}>
                {/* Stage 0 — service selection */}
                <div style={{ position: 'absolute', inset: 0, opacity: stage === 0 ? 1 : 0, pointerEvents: stage === 0 ? 'auto' : 'none', transition: 'opacity 0.5s ease' }}>
                  <div>
                    <h4 className="font-display font-bold mb-5" style={{ fontSize: '1.5rem', letterSpacing: '-0.018em', color: 'var(--abyss)' }}>
                      What do you need help with?
                    </h4>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
                      {topics.map((opt, i) => (
                        <div key={i} className="rounded-xl p-3 flex items-start gap-3 transition-colors" style={{
                          border: opt.selected ? '1.5px solid var(--abyss)' : '1px solid rgba(26,36,54,0.1)',
                          background: opt.selected ? 'rgba(26,36,54,0.02)' : 'transparent',
                        }}>
                          <div className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style={{ background: 'rgba(26,36,54,0.06)', color: 'var(--abyss)' }}>
                            <svg width="18" height="18" viewBox="0 0 24 24">{opt.icon}</svg>
                          </div>
                          <div className="flex-1 min-w-0">
                            <div className="font-display font-bold" style={{ fontSize: '0.88rem', color: 'var(--abyss)', letterSpacing: '-0.01em' }}>{opt.t}</div>
                            <div className="font-body mt-0.5" style={{ fontSize: '0.76rem', lineHeight: 1.35, color: 'rgba(26,36,54,0.55)' }}>{opt.s}</div>
                          </div>
                          {opt.selected && (
                            <div className="w-5 h-5 rounded-full flex items-center justify-center shrink-0 mt-0.5" style={{ background: 'var(--abyss)', color: 'var(--parchment)' }}>
                              <svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M2.5 6L5 8.5L9.5 3.5" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Stage 1 — contact info */}
                <div style={{ position: 'absolute', inset: 0, opacity: stage === 1 ? 1 : 0, pointerEvents: stage === 1 ? 'auto' : 'none', transition: 'opacity 0.5s ease' }}>
                  <div>
                    <h4 className="font-display font-bold mb-5" style={{ fontSize: '1.35rem', letterSpacing: '-0.018em', color: 'var(--abyss)' }}>
                      Almost done. Where should we send your estimate?
                    </h4>
                    <div className="grid grid-cols-2 gap-3 mb-3">
                      <div className="rounded-xl px-3.5 py-2.5" style={{ border: '1.5px solid var(--summit)', background: 'rgba(255,255,255,0.5)' }}>
                        <div className="font-body" style={{ fontSize: '0.88rem', color: 'var(--summit)' }}>Your Name</div>
                      </div>
                      <div className="rounded-xl px-3.5 py-2.5" style={{ border: '1px solid rgba(26,36,54,0.1)', background: 'rgba(26,36,54,0.03)' }}>
                        <div className="font-body" style={{ fontSize: '0.88rem', color: 'rgba(26,36,54,0.45)' }}>Phone Number</div>
                      </div>
                    </div>
                    <div className="mono-label mb-3" style={{ color: 'var(--summit)', fontSize: '0.62rem', letterSpacing: '0.12em', textTransform: 'none' }}>This field is required.</div>
                    <div className="grid grid-cols-2 gap-3 mb-3">
                      <div className="rounded-xl px-3.5 py-2.5" style={{ border: '1px solid rgba(26,36,54,0.1)', background: 'rgba(26,36,54,0.03)' }}>
                        <div className="font-body" style={{ fontSize: '0.88rem', color: 'rgba(26,36,54,0.45)' }}>Email <span style={{ color: 'rgba(26,36,54,0.35)' }}>(optional)</span></div>
                      </div>
                      <div className="rounded-xl px-3.5 py-2.5" style={{ border: '1px solid rgba(26,36,54,0.1)', background: 'rgba(26,36,54,0.03)' }}>
                        <div className="font-body" style={{ fontSize: '0.88rem', color: 'rgba(26,36,54,0.45)' }}>Service Address or Postal Code</div>
                      </div>
                    </div>
                    <div className="rounded-xl px-3.5 py-6 mb-4" style={{ border: '1px solid rgba(26,36,54,0.1)', background: 'rgba(26,36,54,0.03)' }}>
                      <div className="font-body" style={{ fontSize: '0.88rem', color: 'rgba(26,36,54,0.45)' }}>Tell us about the job <span style={{ color: 'rgba(26,36,54,0.35)' }}>(optional)</span></div>
                    </div>
                    <p className="font-body mb-3" style={{ fontSize: '0.75rem', color: 'rgba(26,36,54,0.55)' }}>
                      By submitting, you agree to be contacted by Peak Comfort Mechanical about your estimate.
                    </p>
                    <button className="w-full rounded-full py-3.5 font-display font-bold inline-flex items-center justify-center gap-2" style={{ background: 'var(--summit)', color: 'var(--abyss)', fontSize: '1rem' }}>
                      Get My Estimate →
                    </button>
                  </div>
                </div>

                {/* Stage 2 — result */}
                <div style={{ position: 'absolute', inset: 0, opacity: stage === 2 ? 1 : 0, pointerEvents: stage === 2 ? 'auto' : 'none', transition: 'opacity 0.5s ease', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <div className="flex flex-col items-center text-center pt-2">
                    <div className="w-14 h-14 rounded-full flex items-center justify-center mb-3" style={{ background: 'rgba(58,140,168,0.15)' }}>
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="var(--alpine-700)" strokeWidth="1.6"/><path d="M7.5 12.5 L11 16 L17 9" stroke="var(--alpine-700)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </div>
                    <h4 className="font-display font-bold mb-3" style={{ fontSize: '1.1rem', color: 'var(--abyss)' }}>Your Estimated Range</h4>
                    <div className="font-display font-bold mb-4" style={{ fontSize: 'clamp(2.2rem, 4vw, 3rem)', letterSpacing: '-0.028em', color: 'var(--abyss)', lineHeight: 1 }}>
                      $900 <span style={{ color: 'rgba(26,36,54,0.4)', fontWeight: 400 }}>–</span> $2,500
                    </div>
                    <p className="font-body max-w-[44ch] mb-5" style={{ fontSize: '0.9rem', lineHeight: 1.6, color: 'rgba(26,36,54,0.65)' }}>
                      Based on what you've told us, similar projects in Dartmouth &amp; Halifax Regional Municipality typically range from <strong style={{ color: 'var(--abyss)' }}>$900 – $2,500</strong>. A member of our team will follow up within 24 hours with a precise quote. <strong style={{ color: 'var(--abyss)' }}>The price we quote is the price you pay.</strong>
                    </p>
                    <button className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full font-display font-bold" style={{ border: '1.5px solid var(--abyss)', color: 'var(--abyss)', fontSize: '0.92rem', background: 'transparent' }}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 4 h4 l2 5 -2.5 1.5 a11 11 0 0 0 5 5 L15 13 l5 2 v4 a2 2 0 0 1 -2 2 A16 16 0 0 1 3 6 a2 2 0 0 1 2 -2 Z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                      Can't wait? Call us now →
                    </button>
                    <p className="font-body mt-3" style={{ fontSize: '0.75rem', color: 'rgba(26,36,54,0.5)' }}>
                      No work starts without your approval. No surprises.
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Connector */}
            <div className="relative flex justify-center my-4">
              <svg width="60" height="60" viewBox="0 0 60 60">
                <path d="M30 5 Q 30 30 30 55" fill="none" stroke="#F2BBA0" strokeWidth="1.5" strokeDasharray="3 5" />
                <path d="M25 48 L30 55 L35 48" fill="none" stroke="#F2BBA0" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 mono-label px-3 py-1 rounded-full" style={{ background: 'rgba(14,21,32,0.7)', color: 'rgba(245,240,235,0.7)', backdropFilter: 'blur(8px)' }}>
                lands in dashboard
              </span>
            </div>

            {/* Dashboard card (owner side) */}
            <div className="glass-dark rounded-3xl p-6 md:p-7 relative" style={{
              background: 'rgba(14, 21, 32, 0.72)',
              boxShadow: '0 40px 80px -30px rgba(0,0,0,0.6)',
            }}>
              <div className="flex items-center justify-between mb-5">
                <div className="flex items-center gap-3">
                  <svg width="22" height="20" viewBox="0 0 32 28" fill="none"><path d="M16 1L31 27H1L16 1Z" fill="#55AACB" /><path d="M16 9L24 23H8L16 9Z" fill="#3A8CA8" /></svg>
                  <span className="font-display font-semibold" style={{ color: 'var(--parchment)', fontSize: '1rem' }}>Alp dashboard: Peak Comfort Mechanical</span>
                </div>
                <span className="chip dark">Owner view</span>
              </div>

              {/* Stat row */}
              <div className="grid grid-cols-3 gap-3 mb-6">
                {[
                  { l: 'New leads', v: '12', s: 'this week' },
                  { l: 'Avg quote', v: '$3.8K', s: 'last 30 days' },
                  { l: 'Reply time', v: '42m', s: 'median' },
                ].map(s => (
                  <div key={s.l} className="rounded-xl p-3" style={{ background: 'rgba(245,240,235,0.05)', border: '1px solid rgba(245,240,235,0.08)' }}>
                    <span className="mono-label block mb-1" style={{ color: 'rgba(245,240,235,0.45)' }}>{s.l}</span>
                    <div className="font-display font-bold ticker-number" style={{ fontSize: '1.5rem', color: 'var(--parchment)' }}>{s.v}</div>
                    <span className="font-display italic font-light" style={{ fontSize: '0.78rem', color: 'rgba(245,240,235,0.5)' }}>{s.s}</span>
                  </div>
                ))}
              </div>

              {/* Leads table */}
              <div>
                <div className="flex items-center justify-between mb-3">
                  <span className="mono-label" style={{ color: 'rgba(245,240,235,0.5)' }}>Recent leads</span>
                  <span className="mono-label" style={{ color: 'rgba(245,240,235,0.35)' }}>Showing 5 of 12</span>
                </div>
                <div className="rounded-xl overflow-hidden" style={{ border: '1px solid rgba(245,240,235,0.08)' }}>
                  {leads.map((l, i) => (
                    <div key={i} className="grid grid-cols-[1fr_1fr_auto_auto] items-center gap-4 px-4 py-3"
                         style={{ borderTop: i === 0 ? 'none' : '1px solid rgba(245,240,235,0.06)', background: i === 0 ? 'rgba(184,113,90,0.08)' : 'transparent' }}>
                      <div className="min-w-0">
                        <div className="font-display font-semibold truncate" style={{ color: 'var(--parchment)', fontSize: '0.95rem' }}>{l.name}</div>
                        <div className="font-body truncate" style={{ fontSize: '0.8rem', color: 'rgba(245,240,235,0.55)' }}>{l.job}</div>
                      </div>
                      <div className="font-display font-medium ticker-number hidden sm:block" style={{ color: 'var(--glacier)', fontSize: '0.92rem' }}>{l.quote}</div>
                      <span className="mono-label hidden md:inline" style={{ color: 'rgba(245,240,235,0.4)' }}>{l.when}</span>
                      <span className="inline-flex items-center gap-1.5 font-mono uppercase" style={{ fontSize: '0.6rem', letterSpacing: '0.16em', color: statusColor(l.s) }}>
                        <span className="w-1.5 h-1.5 rounded-full" style={{ background: statusColor(l.s) }} />
                        {l.s}
                      </span>
                    </div>
                  ))}
                </div>
              </div>

              {/* Small caption */}
              <div className="mt-5 flex items-center justify-between">
                <span className="font-display italic font-light" style={{ fontSize: '0.9rem', color: 'rgba(245,240,235,0.55)' }}>
                  Included with the Business tier. No extra fees, ever.
                </span>
                <span className="mono-label" style={{ color: 'rgba(245,240,235,0.4)' }}>Encrypted · US-hosted</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.OwnersSection = OwnersSection;
