/* global React */

// ─────────────────────────────────────────────────────────────
// ServiceLux — what we do, owner-outcome headers
// ─────────────────────────────────────────────────────────────
function ServiceLux() {
  const cols = [
    {
      roman: 'I',
      h: 'Your inbox stays empty.',
      items: [
        'Guest messages answered in minutes',
        'Bilingual guest support, local teams',
        'Housekeeping on a 48-hour turn, photographed',
        'Photographed inspection after every clean',
        'Linens, consumables & restocking',
        'On-call maintenance & vetted, licensed local network',
      ],
      b: "Guest replies in minutes, twenty-four hours a day, by a person who knows your house. Claims, reviews, after-hours emergencies — handled before they become your problem.",
    },
    {
      roman: 'II',
      h: 'Your nightly rate is calibrated daily.',
      items: [
        'AI-driven dynamic pricing, set daily',
        'Listed on Airbnb, Vrbo, Booking.com, Furnished Finder, and direct',
        'Direct-booking site with past-guest retargeting',
        'Furnished Finder for medium-term inquiries',
        'Monthly owner statement with reservation, P&L, and message detail; direct-to-your-account payouts',
      ],
      b: "AI-driven dynamic pricing, calibrated daily. Local events, demand curves, competitor moves — tracked so your rate is right every night, not just the nights you remembered to update it.",
    },
    {
      roman: 'III',
      h: 'Your home is cared for like ours.',
      items: [
        'Damage and incident claims, filed for you — claims-handling expertise across the portfolio',
        'Owner statements, monthly and itemized',
        'Tax and compliance guidance, per market',
        'Insurance documentation kept current',
        'A named account lead — not a ticket queue',
      ],
      b: "The reporting, claims, and compliance work that used to land on your desk now lands on ours. One person on our side knows your house by name. You see the numbers; we handle the paperwork.",
    },
  ];
  const isMobile = useIsMobile();
  return (
    <section data-screen-label="06 Service" style={{
      background: 'var(--cream-100)',
      padding: isMobile ? '120px 0' : '180px 0',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '0 20px' : '0 48px' }}>
        <FadeIn>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
            gap: isMobile ? 32 : 96,
            marginBottom: isMobile ? 64 : 120,
            alignItems: isMobile ? 'start' : 'end',
            paddingBottom: 32, borderBottom: '1px solid rgba(74, 63, 48, 0.16)',
          }}>
            <div>
              <div style={{ marginBottom: 28 }}>
                <InkRule color="rgba(28,26,23,0.3)" align="flex-start"/>
              </div>
              <div style={{
                fontFamily: 'var(--font-body)', fontSize: 11,
                letterSpacing: '0.36em', textTransform: 'uppercase',
                color: 'var(--bronze-500)', marginBottom: 28,
              }}>·&nbsp;&nbsp;What we do&nbsp;&nbsp;·</div>
              <h2 style={{
                fontFamily: 'var(--font-display)',
                fontSize: 'clamp(2.2rem, 4vw, 3.6rem)',
                fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.025em',
                color: 'var(--ink-900)', margin: 0, textWrap: 'balance',
                fontFeatureSettings: '"ss02", "liga"',
                wordBreak: 'normal', overflowWrap: 'break-word',
                hyphens: 'none', WebkitHyphens: 'none',
              }}>
                We co-host your short-term rental, <I>end to end.</I>
              </h2>
            </div>
            <div>
              <p style={{
                fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.75,
                color: 'var(--clay-700)', margin: 0, maxWidth: 480,
              }}>
                Pricing, guest messaging, cleaning, maintenance, software &mdash; every piece of running a short-term rental, run by us. You keep your listing, your reviews, and your payouts; we do the work.
              </p>
            </div>
          </div>
        </FadeIn>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 56 : 64,
        }}>
          {cols.map((c, i) => (
            <FadeIn key={c.roman} delay={i * 100}>
              <div>
                <div style={{
                  fontFamily: 'var(--font-display)', fontStyle: 'italic',
                  fontSize: 44, fontWeight: 300,
                  color: 'var(--bronze-500)', letterSpacing: '-0.02em',
                  marginBottom: 32, lineHeight: 1,
                }}>{c.roman}</div>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontSize: 24,
                  fontWeight: 400, letterSpacing: '-0.01em',
                  color: 'var(--ink-900)',
                  margin: '0 0 20px', lineHeight: 1.25,
                  textWrap: 'balance',
                }}>{c.h}</h3>
                <p style={{
                  fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.7,
                  color: 'var(--clay-700)', margin: '0 0 24px',
                }}>{c.b}</p>
                <ul style={{
                  listStyle: 'none', padding: 0, margin: 0,
                  borderTop: '1px solid rgba(28,26,23,0.14)',
                }}>
                  {c.items.map((it, j) => (
                    <li key={j} style={{
                      display: 'flex', gap: 14, alignItems: 'baseline',
                      padding: '12px 0',
                      borderBottom: '1px solid rgba(28,26,23,0.1)',
                      fontFamily: 'var(--font-body)', fontSize: 13.5,
                      color: 'var(--ink-900)', lineHeight: 1.45,
                    }}>
                      <span style={{
                        fontFamily: 'var(--font-display)', fontStyle: 'italic',
                        fontSize: 11, color: 'var(--bronze-500)', minWidth: 18,
                      }}>— {String(j + 1).padStart(2, '0')}</span>
                      <span>{it}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// EnquireLux — dark inline-form CTA, single-column centered
// ─────────────────────────────────────────────────────────────
function EnquireLux() {
  const isMobile = useIsMobile();
  const [email, setEmail] = React.useState('');
  const [address, setAddress] = React.useState('');
  const [platform, setPlatform] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState(null);
  const valid = email.trim().length > 3 && email.includes('@');

  const submit = async (e) => {
    e.preventDefault();
    if (!valid || sending) return;
    setSending(true);
    setError(null);
    try {
      const res = await fetch('https://formspree.io/f/xjgjnvey', {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email,
          property_address: address || '(not provided)',
          listing_platform: platform || '(not provided)',
          _subject: `New discovery call request — ${email}`,
          _replyto: email,
        }),
      });
      if (res.ok) {
        setSent(true);
      } else {
        const data = await res.json().catch(() => ({}));
        const msg = data && data.errors && data.errors[0] && data.errors[0].message;
        setError(msg || 'Something went wrong. Please email nick@divergentestates.com directly.');
      }
    } catch {
      setError('Network error. Please email nick@divergentestates.com directly.');
    } finally {
      setSending(false);
    }
  };

  const inputBase = {
    width: '100%',
    background: 'rgba(251,248,242,0.06)',
    border: '1px solid rgba(251,248,242,0.22)',
    color: 'var(--cream-50)',
    fontFamily: 'var(--font-body)', fontSize: 15,
    padding: '16px 18px',
    borderRadius: 8,
    outline: 'none',
    boxSizing: 'border-box',
  };

  return (
    <section id="enquire" data-screen-label="15 Enquire" style={{
      background: 'var(--ink-900)',
      color: 'var(--cream-50)',
      padding: isMobile ? '120px 20px' : '180px 32px',
    }}>
      <div style={{ maxWidth: 780, margin: '0 auto', textAlign: 'center' }}>
        <FadeIn>
          <div style={{
            fontFamily: 'var(--font-body)', fontSize: 11,
            letterSpacing: '0.36em', textTransform: 'uppercase',
            color: 'var(--terracotta-500)', marginBottom: 32,
          }}>·&nbsp;&nbsp;The next step&nbsp;&nbsp;·</div>
        </FadeIn>
        <FadeIn delay={120}>
          <h2 style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(2.4rem, 5vw, 4.4rem)',
            fontWeight: 300, lineHeight: 1.04, letterSpacing: '-0.02em',
            color: 'var(--cream-50)', margin: 0, textWrap: 'balance',
            fontFeatureSettings: '"ss02", "liga"',
          }}>
            Book a <span style={{ fontStyle: 'italic' }}>discovery call.</span>
          </h2>
        </FadeIn>
        <FadeIn delay={220}>
          <p style={{
            marginTop: 32,
            fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.75,
            color: 'rgba(251,248,242,0.78)', maxWidth: 520, margin: '32px auto 0',
            textWrap: 'pretty',
          }}>
            Tell us about your property. We'll walk through projected revenue within forty-eight hours. No pressure, no follow-up unless you ask for one.
          </p>
        </FadeIn>

        <FadeIn delay={300}>
          {sent ? (
            <div style={{
              marginTop: 56, maxWidth: 460, marginLeft: 'auto', marginRight: 'auto',
              background: 'var(--moss-100)', color: 'var(--moss-600)',
              borderRadius: 999, padding: '16px 26px',
              fontFamily: 'var(--font-body)', fontSize: 14.5,
              display: 'inline-flex', alignItems: 'center', gap: 12,
              fontWeight: 600,
            }}>
              <span aria-hidden style={{
                width: 22, height: 22, borderRadius: 11,
                background: 'var(--moss-600)', color: 'var(--moss-100)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 13, fontWeight: 700,
              }}>✓</span>
              Thanks — we'll be in touch within forty-eight hours.
            </div>
          ) : (
            <form onSubmit={submit} style={{
              marginTop: 56, maxWidth: 460, marginLeft: 'auto', marginRight: 'auto',
              display: 'flex', flexDirection: 'column', gap: 14, textAlign: 'left',
            }}>
              <input
                type="email" required
                value={email} onChange={(e) => setEmail(e.target.value)}
                placeholder="you@yourhome.com"
                aria-label="Email"
                style={inputBase}
              />
              <input
                type="text"
                value={address} onChange={(e) => setAddress(e.target.value)}
                placeholder="Property address (City, state)"
                aria-label="Property address"
                style={inputBase}
              />
              <select
                value={platform} onChange={(e) => setPlatform(e.target.value)}
                aria-label="Current listing platform"
                style={{ ...inputBase, appearance: 'none', cursor: 'pointer' }}
              >
                <option value="" style={{ color: 'var(--ink-900)' }}>Current listing platform (optional)</option>
                <option value="airbnb"     style={{ color: 'var(--ink-900)' }}>Airbnb</option>
                <option value="vrbo"       style={{ color: 'var(--ink-900)' }}>Vrbo</option>
                <option value="booking"    style={{ color: 'var(--ink-900)' }}>Booking.com</option>
                <option value="direct"     style={{ color: 'var(--ink-900)' }}>Direct</option>
                <option value="not-listed" style={{ color: 'var(--ink-900)' }}>Not yet listed</option>
              </select>
              <button type="submit" disabled={!valid || sending} style={{
                marginTop: 8,
                fontFamily: 'var(--font-body)', fontSize: 12,
                letterSpacing: '0.24em', textTransform: 'uppercase',
                color: 'var(--cream-50)',
                background: sending ? 'var(--terracotta-600)' : (valid ? 'var(--terracotta-500)' : 'rgba(184,92,60,0.5)'),
                border: 'none',
                cursor: sending ? 'wait' : (valid ? 'pointer' : 'not-allowed'),
                padding: '18px 26px', borderRadius: 8,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 12,
                fontWeight: 600, transition: 'background 200ms ease',
                opacity: sending ? 0.85 : 1,
              }}>
                {sending ? 'Sending…' : 'Request call'}
                <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', letterSpacing: 0, fontSize: 14 }}>—&nbsp;&rsaquo;</span>
              </button>
              {error && (
                <div role="alert" style={{
                  fontFamily: 'var(--font-body)', fontSize: 13,
                  color: 'var(--terracotta-500)', lineHeight: 1.5,
                  marginTop: 4,
                }}>{error}</div>
              )}
            </form>
          )}
        </FadeIn>

        <FadeIn delay={400}>
          <div style={{
            marginTop: 36,
            fontFamily: 'var(--font-mono, var(--font-body))', fontSize: 12.5,
            color: 'rgba(251,248,242,0.52)', letterSpacing: '0.04em',
          }}>
            nick@divergentestates.com &nbsp;·&nbsp; +1 605.290.2583
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

function ContactLine({ label, lines, isEmail }) {
  return (
    <div>
      <div style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontSize: 13, color: 'var(--bronze-500)',
        marginBottom: 6, letterSpacing: '0.02em',
      }}>{label}</div>
      {lines.map((l, i) => (
        <div key={i} style={{
          fontFamily: isEmail ? 'var(--font-mono)' : 'var(--font-body)',
          fontSize: 15, color: 'var(--ink-900)',
          lineHeight: 1.6,
        }}>{l}</div>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// FooterLux — centered wordmark, almost no type
// ─────────────────────────────────────────────────────────────
function FooterLux() {
  const isMobile = useIsMobile();
  return (
    <footer style={{
      background: 'var(--ink-900)',
      color: 'var(--cream-50)',
      padding: isMobile ? '80px 20px 40px' : '120px 48px 56px',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: isMobile ? 56 : 88 }}>
          <div style={{
            fontFamily: 'var(--font-wordmark)',
            fontSize: isMobile ? 17 : 20,
            letterSpacing: isMobile ? '0.28em' : '0.4em',
            color: 'var(--cream-50)',
          }}>DIVERGENT&nbsp;&nbsp;ESTATES</div>
          <div style={{
            marginTop: 20, fontFamily: 'var(--font-display)',
            fontStyle: 'italic', fontWeight: 300,
            fontSize: isMobile ? 14 : 16,
            color: 'rgba(251,248,242,0.55)', letterSpacing: '0.02em',
            textWrap: 'balance',
          }}>
            Co-hosting for short-term rentals &nbsp;·&nbsp; 56 properties &nbsp;·&nbsp; 13 states &nbsp;·&nbsp; Est. 2021
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
          gap: isMobile ? 32 : 48,
          paddingTop: isMobile ? 32 : 48,
          paddingBottom: isMobile ? 32 : 48,
          borderTop: '1px solid rgba(251,248,242,0.14)',
          borderBottom: '1px solid rgba(251,248,242,0.14)',
        }}>
          <FooterCol h="Office" items={['By appointment', 'Nationwide', 'nick@divergentestates.com', '+1 605.290.2583']}/>
          <FooterCol h="Legal" items={['Privacy policy', 'Terms of service']}/>
        </div>

        <div style={{
          marginTop: isMobile ? 28 : 40,
          display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          justifyContent: 'space-between',
          alignItems: isMobile ? 'flex-start' : 'center',
          gap: isMobile ? 12 : 0,
          fontFamily: 'var(--font-body)', fontSize: 11,
          letterSpacing: '0.24em', textTransform: 'uppercase',
          color: 'rgba(251,248,242,0.45)',
        }}>
          <span>&copy; Divergent Estates LLC &nbsp;·&nbsp; 2026</span>
          <span>Licensed &nbsp;·&nbsp; Insured &nbsp;·&nbsp; Nationwide</span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ h, items }) {
  return (
    <div>
      <div style={{
        fontFamily: 'var(--font-body)', fontSize: 11,
        letterSpacing: '0.28em', textTransform: 'uppercase',
        color: 'rgba(251,248,242,0.6)', marginBottom: 20,
      }}>{h}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, j) => (
          <li key={j}>
            <a href="#" style={{
              color: 'var(--cream-50)', textDecoration: 'none',
              fontFamily: 'var(--font-body)', fontSize: 14, letterSpacing: '0.01em',
            }}>{it}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { ServiceLux, EnquireLux, FooterLux });
