// About page, uses content from chamblisssb.com/about

const AboutHero = () => (
  <section style={{ borderBottom: '1px solid var(--border)', position: 'relative' }}>
    <div className="grid-bg" style={{
      position: 'absolute', inset: 0, opacity: 0.35,
      maskImage: 'linear-gradient(to bottom, black, transparent)',
      WebkitMaskImage: 'linear-gradient(to bottom, black, transparent)',
    }}></div>
    <div className="page" style={{ position: 'relative', paddingTop: 80, paddingBottom: 80 }}>
      <SectionEyebrow id="about" label="Why work with us" />
      <h1 style={{ maxWidth: 1100 }}>
        Why work<br/>
        <span style={{ color: 'var(--accent)' }}>with us.</span>
      </h1>
      <p style={{ marginTop: 40, maxWidth: 680, fontSize: 18, lineHeight: 1.55 }}>
        Chambliss Steel Buildings is a reputable provider of high-quality steel building solutions.
        We offer a wide range of customizable options to meet the unique needs of our customers.
      </p>
    </div>
  </section>
);

const AboutDescription = () => (
  <section className="section">
    <div className="page">
      <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80 }}>
        <div>
          <SectionEyebrow label="About us" />
          <img
            src="assets/img/logo.png"
            alt="Chambliss Steel Buildings"
            style={{ width: 220, maxWidth: '100%', margin: '8px auto 18px', display: 'block' }}
          />
          <p className="mono" style={{ fontSize: 12, color: 'var(--fg-faint)', letterSpacing: '0.08em', textAlign: 'center' }}>
            LIVE OAK, FL
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28, fontSize: 18, lineHeight: 1.55 }}>
          <p style={{ color: 'var(--fg)' }}>
            Whether you're looking for a commercial, industrial, or residential steel building,
            Chambliss has the expertise and experience to deliver exceptional results.
          </p>
          <p>
            Our team is dedicated to providing excellent customer service and ensuring each project
            is completed on time and within budget. With Chambliss Steel Buildings, you can trust
            that your building project is in good hands.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const AboutGallery = () => (
  <section className="section">
    <div className="page">
      <SectionEyebrow label="Our work" />
      <h2 style={{ marginBottom: 48, maxWidth: 600 }}>From the field.</h2>
      {/* All six slots used to carry "Steel building project" as their alt, so
          they read as one repeated image to a screen reader, every alt here is
          now specific. Main-Photo1 keeps the feature slot: on home it's only the
          hero video's poster frame, so this is the one place it's really seen.
          IMG_0412 is the one photo still shared with home (Agriculture card). */}
      <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16, marginBottom: 16 }}>
        <ImgSlot
          label="Finished barndominium at dusk, wraparound porch lit with string lights"
          height={420}
          sizes="(max-width: 900px) 100vw, 66vw"
          src="assets/img/Main-Photo1-e1767891509986.jpeg"
        />
        <div style={{ display: 'grid', gap: 16 }}>
          <ImgSlot
            label="Steel frame standing against a sunrise sky, boom lift parked inside"
            height={200}
            sizes="(max-width: 900px) 100vw, 33vw"
            src="assets/img/IMG_0412.jpeg"
          />
          <ImgSlot
            label="Aerial view of a completed steel frame beside the access road"
            height={200}
            sizes="(max-width: 900px) 100vw, 33vw"
            slug="aerial-frame-roadside"
          />
        </div>
      </div>
      <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
        <ImgSlot
          label="Two boom trucks staging a roof truss outside a finished hangar"
          height={240}
          sizes="(max-width: 900px) 100vw, 33vw"
          slug="truss-staging-cranes"
        />
        <ImgSlot
          label="Night concrete pour, crew finishing a floodlit slab over rebar"
          height={240}
          sizes="(max-width: 900px) 100vw, 33vw"
          slug="slab-pour-night"
        />
        <ImgSlot
          label="Bi-fold hangar door frame swung open, a worker standing on it for scale"
          height={240}
          sizes="(max-width: 900px) 100vw, 33vw"
          src="assets/img/IMG_6879.jpeg"
        />
      </div>
    </div>
  </section>
);

const AboutTeam = () => {
  const team = [
    { name: 'Brad Chambliss', role: 'President / CEO', img: 'assets/img/IMG_5835-A.jpg' },
    { name: 'Meagan Chambliss', role: 'Vice President / Bookkeeper', img: 'assets/img/IMG_5826-A.jpg' },
    { name: 'Josephine Costa', role: 'Senior CAD Drafter', img: 'assets/img/me-withou-A.jpg' },
  ];
  return (
    <section className="section">
      <div className="page">
        <div style={{ marginBottom: 56 }}>
          <SectionEyebrow label="Our team" />
          <h2>The team.</h2>
        </div>
        <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {team.map((m) => (
            <div key={m.name} className="spec-card" style={{ padding: 0, overflow: 'hidden' }}>
              <div className="crosshair ch-tl"></div>
              <div className="crosshair ch-tr"></div>
              <div className="crosshair ch-bl"></div>
              <div className="crosshair ch-br"></div>
              <div className="hover-zoom" style={{ height: 280, background: 'var(--bg-elev)', position: 'relative', overflow: 'hidden' }}>
                {m.img && <img src={m.img} alt={m.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />}
                {!m.img && (
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="var(--fg-faint)" strokeWidth="1.2">
                      <circle cx="24" cy="18" r="8" />
                      <path d="M8 42 C8 32 16 26 24 26 C32 26 40 32 40 42" />
                    </svg>
                  </div>
                )}
              </div>
              <div style={{ padding: 24 }}>
                <h3 style={{ fontSize: 20 }}>{m.name}</h3>
                <p className="mono" style={{ marginTop: 8, fontSize: 12, color: 'var(--fg-dim)', letterSpacing: '0.04em' }}>{m.role}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const AboutCreds = () => (
  <section className="section">
    <div className="page">
      <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'start' }}>
        <div>
          <SectionEyebrow label="Credentials" />
          <h2>On paper.</h2>
        </div>
        <div style={{ display: 'grid', gap: 20 }}>
          <div className="mob-cred" style={{
            display: 'grid', gridTemplateColumns: '120px 1fr auto', gap: 24, alignItems: 'center',
            padding: '24px 0', borderTop: '1px solid var(--border)',
          }}>
            <img src="assets/img/bbb-logo-white.svg" alt="BBB Accredited Business" style={{ height: 44, width: 'auto', display: 'block' }} />
            <div>
              <h3 style={{ fontSize: 18 }}>BBB Accredited</h3>
              <p style={{ fontSize: 14, marginTop: 4 }}>A+ rated. On file since 2023.</p>
            </div>
            <span className="mono" style={{ fontSize: 11, color: 'var(--fg-faint)' }}>↗ bbb.org</span>
          </div>
          <a
            className="mob-cred"
            href="https://www.myfloridalicense.com/portalsearches/VerifyLicensee/LicenseDetail?ID=97D8C5F8F4B47D017108086D9DC52706"
            target="_blank"
            rel="noopener noreferrer"
            style={{
              display: 'grid', gridTemplateColumns: '120px 1fr auto', gap: 24, alignItems: 'center',
              padding: '24px 0', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)',
            }}
          >
            <div className="mono" style={{ fontSize: 13, color: 'var(--accent)' }}>CBC1267224</div>
            <div>
              <h3 style={{ fontSize: 18 }}>FL Certified Building Contractor</h3>
              <p style={{ fontSize: 14, marginTop: 4 }}>License current. Insured and bonded.</p>
            </div>
            <span className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>VERIFY ↗</span>
          </a>
        </div>
      </div>
    </div>
  </section>
);

const AboutVerse = () => (
  <section style={{ borderBottom: '1px solid var(--border)' }}>
    <div className="page" style={{ padding: '120px 32px', textAlign: 'center' }}>
      <SectionEyebrow label="John 3:16" />
      <p style={{
        fontSize: 'clamp(28px, 3.6vw, 48px)',
        lineHeight: 1.25,
        letterSpacing: '-0.02em',
        maxWidth: 880,
        margin: '24px auto 0',
        color: 'var(--fg)',
        fontWeight: 500,
      }}>
        "For God so loved the world, that he gave his only Son, that whoever believes in him should not perish but have eternal life."
      </p>
      <p className="mono" style={{ marginTop: 28, fontSize: 12, color: 'var(--fg-faint)', letterSpacing: '0.12em' }}>
        JOHN 3:16
      </p>
    </div>
  </section>
);

// Real dark-styled map via Leaflet + free CARTO dark tiles (no API key). Centered
// on the business's published coordinates (also shown in the panel and footer).
const ADDRESS_COORDS = [30.2949, -82.9849];

const AboutMap = () => {
  const elRef = React.useRef(null);
  const mapRef = React.useRef(null);
  const [failed, setFailed] = React.useState(false);

  React.useEffect(() => {
    const L = window.L;
    if (!elRef.current || mapRef.current) return;
    if (!L) { setFailed(true); return; } // Leaflet CDN didn't load, show the link fallback
    try {
      const accent = (getComputedStyle(document.documentElement).getPropertyValue('--accent') || '#6ba6cf').trim();
      const map = L.map(elRef.current, { center: ADDRESS_COORDS, zoom: 14, scrollWheelZoom: false });
      mapRef.current = map;
      L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
        subdomains: 'abcd', maxZoom: 20,
        attribution: '&copy; OpenStreetMap &copy; CARTO',
      }).addTo(map);
      L.circleMarker(ADDRESS_COORDS, { radius: 9, color: accent, weight: 3, fillColor: accent, fillOpacity: 0.85 })
        .addTo(map)
        .bindPopup('<b>Chambliss Steel Buildings</b><br>6825 Skeen Rd, Live Oak, FL');
      // Leaflet needs a size nudge when mounted inside a grid/flex cell.
      setTimeout(() => { if (mapRef.current) mapRef.current.invalidateSize(); }, 120);
    } catch (e) {
      setFailed(true);
    }
    return () => { if (mapRef.current) { mapRef.current.remove(); mapRef.current = null; } };
  }, []);

  if (failed) {
    return (
      <a
        href="https://www.google.com/maps/search/?api=1&query=6825+Skeen+Rd+Live+Oak+FL+32060"
        target="_blank" rel="noopener noreferrer"
        style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center', color: 'var(--accent)', fontFamily: 'Geist Mono, monospace', fontSize: 13, padding: 24 }}
      >
        Open 6825 Skeen Rd in Google Maps ↗
      </a>
    );
  }
  return <div ref={elRef} className="about-map" style={{ position: 'absolute', inset: 0 }} />;
};

const AboutVisit = () => (
  <section className="section">
    <div className="page">
      <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--border)' }}>
        <div style={{ padding: 48, borderRight: '1px solid var(--border)' }}>
          <SectionEyebrow label="Stop by" />
          <h2 style={{ marginTop: 8 }}>6825 Skeen Rd.</h2>
          <p className="mono" style={{ marginTop: 12, fontSize: 14, color: 'var(--fg-dim)' }}>
            LIVE OAK, FL 32060<br/>
            30.2949° N, 82.9849° W
          </p>
          <div style={{ marginTop: 32, display: 'grid', gap: 12 }}>
            <a className="btn" href="tel:+13866881121">
              <span className="mono">386.688.1121</span>
            </a>
            <a className="btn" href="mailto:chamblisssteelbuildings@gmail.com">
              <span style={{ fontSize: 13 }}>chamblisssteelbuildings@gmail.com</span>
            </a>
          </div>
          <p style={{ marginTop: 24, fontSize: 13, color: 'var(--fg-faint)' }}>
            Office hours: Mon–Fri, 8am–5pm ET. Saturdays by appointment.
          </p>
        </div>
        <div style={{ position: 'relative', minHeight: 380, background: 'var(--bg-elev)' }}>
          <AboutMap />
        </div>
      </div>
    </div>
  </section>
);

const About = ({ showVerse = true }) => (
  <div className="page-anim">
    <AboutHero />
    <AboutDescription />
    <AboutGallery />
    <AboutTeam />
    <AboutCreds />
    {showVerse && <AboutVerse />}
    <AboutVisit />
  </div>
);

Object.assign(window, { About });