/* Home — single direction now. Plainspoken, regional, confident.
   Coverage map prominent. No founders. Condensed process. */

const HomeHero = ({ nav }) => (
  <WFSection label="HERO" pad="96px 0 72px" border="none">
    <WFContainer>
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 72, alignItems: 'center' }}>
        <div>
          <WFEyebrow>Grande Prairie · Northern Alberta · Northeastern BC</WFEyebrow>
          <WFH1 style={{ marginBottom: 28 }}>
            Drone light shows for Northern Alberta and Northeastern BC.
          </WFH1>
          <WFLede style={{ marginBottom: 36 }}>
            Designed for municipalities, festivals, and large events. Flown by a local operator who knows the region and the regulatory pathway.
          </WFLede>
          <div style={{ display: 'flex', gap: 16 }}>
            <WFButton primary onClick={() => nav('contact')}>Request a Quote</WFButton>
            <WFButton onClick={() => nav('services')}>See Services</WFButton>
          </div>
        </div>
        <WFImage
          kind="image"
          size="approx. 600 × 600px"
          description="Drone formation photographed at dusk above an open field in Northern Alberta. Formation is legible as a simple geometric shape or wordmark. Foreground silhouette of landscape; deep blue-to-dark-grey sky gradient. Hero imagery to be captured during first operating season, summer 2026."
          aspect="1 / 1"
        />
      </div>
    </WFContainer>
  </WFSection>
);

const CoverageSection = () => (
  <WFSection label="COVERAGE" bg="#f4f4f0">
    <WFContainer>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 72, alignItems: 'center' }}>
        <div>
          <WFEyebrow>Where we operate</WFEyebrow>
          <WFH2 style={{ marginBottom: 24 }}>
            Northern Alberta and Northeastern BC, including the Peace Region on both sides of the provincial border.
          </WFH2>
          <WFBody>
            Skytech is based in Grande Prairie. We are not a touring provider flying in from elsewhere. Clients in Fort St. John, Dawson Creek, Peace River, Grande Prairie, and surrounding communities get a local operator with regional knowledge and established presence.
          </WFBody>
        </div>
        <CoverageMap height={340} />
      </div>
    </WFContainer>
  </WFSection>
);

const FormatsOverview = ({ nav }) => {
  const formats = [
    { t: 'Small format', drones: '20–50 drones', b: 'Shorter duration, simpler formations. Private activations, intimate corporate events, smaller community gatherings.' },
    { t: 'Mid format', drones: '75–100 drones', b: 'Community-grade show. Logos, themed sequences, sponsor segments. The typical municipality or festival engagement.' },
    { t: 'Large format', drones: '150–200+ drones', b: 'Higher density visuals, more custom content, multiple themed sequences. Flagship public events and headline moments.' },
  ];
  return (
    <WFSection label="SERVICES · OVERVIEW" pad="96px 0">
      <WFContainer>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, marginBottom: 56 }}>
          <div>
            <WFEyebrow>Services</WFEyebrow>
            <WFH2>Three formats. One managed service.</WFH2>
          </div>
          <WFBody>
            Skytech delivers a fully managed drone light show at a client-specified venue. We handle creative intake, choreography, regulatory steps, on-site execution, and post-show reporting. Every engagement is custom quoted.
          </WFBody>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {formats.map((f, i) => (
            <div key={i} style={{ background: '#fff', border: '1px solid #e5e5e2' }}>
              <WFImage
                kind="image"
                size="approx. 400 × 300px"
                description={
                  i === 0 ? "Small format show: 20–50 drones in a simple geometric formation photographed at dusk above an open field. Clear sky, low horizon." :
                  i === 1 ? "Mid format show: 75–100 drones spelling a custom logo or themed shape, photographed from ground level looking up. Crowd silhouette visible at base of frame." :
                  "Large format show: 150–200+ drones in a multi-element formation, photographed from an elevated or aerial perspective over a large crowd."
                }
                aspect="4 / 3"
              />
              <div style={{ padding: 28 }}>
                <div style={{ fontSize: 11, letterSpacing: '0.14em', fontFamily: 'ui-monospace, Menlo, monospace', color: '#6b6b66', marginBottom: 10 }}>{f.drones}</div>
                <WFH2 style={{ fontSize: 22, marginBottom: 14 }}>{f.t}</WFH2>
                <WFBody style={{ fontSize: 14 }}>{f.b}</WFBody>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 40 }}>
          <WFLink onClick={() => nav('services')}>Full service details</WFLink>
        </div>
      </WFContainer>
    </WFSection>
  );
};

const HowItWorksCondensed = ({ nav }) => (
  <WFSection label="HOW IT WORKS" bg="#f4f4f0">
    <WFContainer>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, marginBottom: 48 }}>
        <div>
          <WFEyebrow>How it works</WFEyebrow>
          <WFH2>Inquiry to post-show, in six stages.</WFH2>
        </div>
        <WFBody>
          Every Skytech engagement follows the same process. Timelines are transparent, roles are defined, deliverables are documented. Summer shows typically book four to nine months ahead; winter shows need additional lead time.
        </WFBody>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 1, background: '#e5e5e2', border: '1px solid #e5e5e2' }}>
        {[
          ['01', 'Inquiry', 'Feasibility check'],
          ['02', 'Proposal', 'Site intake + scope'],
          ['03', 'Contract', 'Deposit, terms'],
          ['04', 'Regulatory', 'SFOC, NAV, NOTAM'],
          ['05', 'Show build', 'Choreography + prep'],
          ['06', 'Show day', 'Go/no-go, fly, report'],
        ].map(([n, t, s], i) => (
          <div key={i} style={{ padding: '24px 20px', background: '#fafaf9' }}>
            <div style={{ fontSize: 11, letterSpacing: '0.14em', fontFamily: 'ui-monospace, Menlo, monospace', color: '#6b6b66', marginBottom: 12 }}>{n}</div>
            <div style={{ fontFamily: 'Georgia, serif', fontSize: 18, marginBottom: 4 }}>{t}</div>
            <div style={{ fontSize: 13, color: '#6b6b66' }}>{s}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 32 }}>
        <WFLink onClick={() => nav('services')}>Full engagement process</WFLink>
      </div>
    </WFContainer>
  </WFSection>
);

const WhoItsFor = ({ nav }) => (
  <WFSection label="WHO IT'S FOR">
    <WFContainer>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80 }}>
        <div>
          <WFEyebrow>Who it's for</WFEyebrow>
          <WFH2>Organizations that run public events.</WFH2>
          <WFBody style={{ marginTop: 20 }}>
            Skytech is a B2B and B2G service. Work is contracted through organizations, not sold to individuals.
          </WFBody>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {[
            ['Municipalities and municipal event committees', 'Canada Day, New Year\'s Eve, city anniversaries, centennials, light-ups. Procurement-ready documentation.'],
            ['Festivals and fair associations', 'Regional festivals, agricultural fair associations, multi-night events with headline-moment programming.'],
            ['Tourism operators and DMOs', 'Regional tourism boards, destination marketing groups, resort operators, winter festival organizers.'],
            ['Corporate and industrial employers', 'Milestone events, employee appreciation, community sponsorship activations.'],
          ].map(([t, b], i) => (
            <div key={i} style={{
              padding: '24px 0', borderTop: '1px solid #e5e5e2',
              display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 32, alignItems: 'start',
            }}>
              <div style={{ fontFamily: 'Georgia, serif', fontSize: 19, lineHeight: 1.3 }}>{t}</div>
              <WFBody style={{ fontSize: 14 }}>{b}</WFBody>
            </div>
          ))}
        </div>
      </div>
    </WFContainer>
  </WFSection>
);

const ComplianceStrip = ({ nav }) => (
  <WFSection label="COMPLIANCE" bg="#f4f4f0">
    <WFContainer>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80, marginBottom: 40 }}>
        <div>
          <WFEyebrow>Compliance</WFEyebrow>
          <WFH2>A regulatory framework, not a checkbox.</WFH2>
        </div>
        <WFBody>
          Every show is flown under a Special Flight Operations Certificate for RPAS, coordinated through NAV Canada, and documented for municipal procurement review. Regulatory and operational readiness is built into how Skytech runs, not bolted on.
        </WFBody>
      </div>
      <CredStrip />
      <div style={{ marginTop: 32 }}>
        <WFLink onClick={() => nav('safety')}>Safety and compliance framework</WFLink>
      </div>
    </WFContainer>
  </WFSection>
);

const HomePage = ({ nav }) => (
  <WFPage label="01 Home">
    <WFNav currentPage="home" nav={nav} />
    <HomeHero nav={nav} />
    <CoverageSection />
    <FormatsOverview nav={nav} />
    <HowItWorksCondensed nav={nav} />
    <WhoItsFor nav={nav} />
    <ComplianceStrip nav={nav} />
    <FinalCTA nav={nav} />
    <WFFooter nav={nav} />
  </WFPage>
);

Object.assign(window, { HomePage });