/* Inner pages — Services, Safety + Compliance, Portfolio, Contact.
   No About. No FAQ page. FAQ Q&A folded into Services. */

// ─────────────────── SERVICES ───────────────────
const ServicesPage = ({ nav }) => {
  const formats = [
    { size: 'Small format', drones: '20–50 drones', desc: 'Shorter duration, simpler formations. Suitable for private activations, intimate corporate events, and smaller community gatherings.' },
    { size: 'Mid format', drones: '75–100 drones', desc: 'Community-grade show. Logos, themed sequences, and sponsor segments. The typical municipality or festival engagement.' },
    { size: 'Large format', drones: '150–200+ drones', desc: 'Higher density visuals, multiple themed sequences, and more custom content. Flagship public events and headline moments.' },
  ];
  const addons = [
    ['Custom logos', 'Your logo, sponsor marks, or community themes rendered in the sky. Quoted separately from the base package.'],
    ['Sponsor segments', 'Dedicated show segments for named sponsors. Included in the timeline with client review.'],
    ['Backup show content', 'A day-of contingency library for weather or operational adjustments.'],
    ['Multiple showings per night', 'Subject to battery and turnaround constraints. Priced per flight.'],
    ['Integrated audio support', 'Via your audio vendor or a Skytech subcontractor.'],
  ];
  const steps = [
    ['01', 'Inquiry and feasibility check', 'We review location, event type, proposed date, and audience size to confirm operational feasibility.'],
    ['02', 'Proposal and site intake', 'We provide a written proposal. You provide venue details: location, obstacles, crowd plan, access.'],
    ['03', 'Contract and deposit', 'Contract with clear scope, weather policy, cancellation and rescheduling terms, and site requirements.'],
    ['04', 'Regulatory steps', 'NAV Canada coordination, SFOC-RPAS application, airspace checks, NOTAM filing, local permits.'],
    ['05', 'Choreography build', 'Show content developed to your brief. Custom logos, themes, or sponsor segments. Client review.'],
    ['06', 'Pre-show preparation', 'Hardware prep, battery conditioning, packing list execution, travel to site.'],
    ['07', 'On-site execution', 'Setup, safety perimeter, test flight, anemometer reading, go/no-go. Show execution. Retrieval.'],
    ['08', 'Post-show', 'Log review, maintenance actions, post-show report. No site debris to clean up.'],
  ];
  const faqs = [
    ['Can you operate during a fire ban?', 'Yes. Drone light shows produce no combustion and no ground debris. The format is operationally viable during fire restriction seasons when other show formats may be restricted or unavailable. We confirm the specific regulatory status for every event site and date.'],
    ['What happens if weather cancels the show?', 'We apply defined go/no-go criteria on show day, based on wind, precipitation, temperature, and visibility, measured on-site. Contracts include clear cancellation and rescheduling terms. Clients are protected regardless of outcome.'],
    ['How far in advance do we need to book?', 'Four to nine months for summer events. Some regulatory steps — including the Special Flight Operations Certificate for RPAS — require lead time that cannot be compressed. Earlier is better.'],
    ['Can you include our logo or sponsor branding in the show?', 'Yes. Custom logos, sponsor segments, and themed sequences are available as add-ons. Customization is quoted separately from standard format packages.'],
    ['Do you work in British Columbia?', 'Yes. Skytech\'s service area covers Northern Alberta and Northeastern BC, including the Peace Region on both sides of the provincial border.'],
    ['Are you a local company or do you tour in from elsewhere?', 'We are based in Grande Prairie. We are not a touring provider from eastern Canada or the US. Our clients get a local operator with regional knowledge and established presence.'],
    ['What do you need from us as the client?', 'Venue access, a crowd management plan, power access or arrangement, and any letters of permission required for the venue or adjacent land. We handle all regulatory steps.'],
    ['Do drone shows leave debris on the ground?', 'No. There is no ground-level fallout, no shell casings, and no combustion residue from the aerial display itself.'],
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <WFPage label="02 Services">
      <WFNav currentPage="services" nav={nav} />

      <WFSection pad="72px 0 48px" border="none">
        <WFContainer>
          <WFEyebrow>Services</WFEyebrow>
          <WFH1 style={{ marginBottom: 28, maxWidth: '20ch' }}>One managed service. Three formats. Locally flown.</WFH1>
          <WFLede>
            Skytech produces fully managed drone light shows at client-specified venues across Northern Alberta and Northeastern BC, including the Peace Region. Every engagement is custom quoted.
          </WFLede>
        </WFContainer>
      </WFSection>

      <WFSection label="WHAT'S INCLUDED" pad="48px 0 72px">
        <WFContainer>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80 }}>
            <div>
              <WFEyebrow>What's included</WFEyebrow>
              <WFH2>Every engagement covers the full scope.</WFH2>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid #e5e5e2' }}>
              {[
                'Creative intake and show planning',
                'Choreography and timeline build',
                'Audio and music synchronization',
                'Site survey inputs and safety zone planning',
                'NAV Canada coordination',
                'SFOC-RPAS application',
                'NOTAM filing where required',
                'Flight operations and on-site execution',
                'Teardown and post-show reporting',
                'No site debris to clean up',
              ].map((s, i) => (
                <div key={i} style={{
                  padding: 20,
                  borderRight: i % 2 === 0 ? '1px solid #e5e5e2' : 'none',
                  borderTop: i >= 2 ? '1px solid #e5e5e2' : 'none',
                  fontSize: 14, display: 'flex', alignItems: 'center', gap: 12, background: '#fff',
                }}>
                  <span style={{ fontFamily: 'ui-monospace, Menlo, monospace', color: '#6b6b66', fontSize: 11 }}>{String(i + 1).padStart(2, '0')}</span>
                  <span>{s}</span>
                </div>
              ))}
            </div>
          </div>
        </WFContainer>
      </WFSection>

      <WFSection label="FORMATS" bg="#f4f4f0">
        <WFContainer>
          <div style={{ maxWidth: 720, marginBottom: 56 }}>
            <WFEyebrow>Formats</WFEyebrow>
            <WFH2>Three standard formats. Custom scoping available.</WFH2>
            <WFBody style={{ marginTop: 20 }}>
              Fleet size determines show scale. Skytech's launch fleet targets 110 drones, scaling toward 300. We will say plainly what's possible for your date and format.
            </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. Low horizon, clear sky." :
                    i === 1 ? "Mid format show: 75–100 drones spelling a custom logo or themed shape, photographed from ground level looking up." :
                    "Large format show: 150–200+ drones in a dense multi-element formation, photographed from an elevated or aerial perspective over a 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.size}</WFH2>
                  <WFBody style={{ fontSize: 14 }}>{f.desc}</WFBody>
                </div>
              </div>
            ))}
          </div>
        </WFContainer>
      </WFSection>

      <WFSection label="ADD-ONS" pad="80px 0">
        <WFContainer>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80 }}>
            <div>
              <WFEyebrow>Add-ons</WFEyebrow>
              <WFH2>Extend the show.</WFH2>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
              {addons.map(([t, b], i) => (
                <div key={i} style={{ paddingBottom: 20, borderBottom: i < addons.length - 1 ? '1px solid #e5e5e2' : 'none', display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 24 }}>
                  <div style={{ fontFamily: 'Georgia, serif', fontSize: 18 }}>{t}</div>
                  <WFBody style={{ fontSize: 14 }}>{b}</WFBody>
                </div>
              ))}
            </div>
          </div>
        </WFContainer>
      </WFSection>

      <WFSection label="ENGAGEMENT PROCESS" bg="#f4f4f0">
        <WFContainer>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, marginBottom: 40 }}>
            <div>
              <WFEyebrow>Process</WFEyebrow>
              <WFH2>From inquiry to post-show report.</WFH2>
            </div>
            <WFBody>
              Eight stages. The timeline is transparent, the roles are defined, and each step has a deliverable.
            </WFBody>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: '#e5e5e2', border: '1px solid #e5e5e2' }}>
            {steps.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: 10 }}>{n}</div>
                <div style={{ fontFamily: 'Georgia, serif', fontSize: 17, marginBottom: 6 }}>{t}</div>
                <div style={{ fontSize: 13, color: '#6b6b66', lineHeight: 1.5 }}>{s}</div>
              </div>
            ))}
          </div>
        </WFContainer>
      </WFSection>

      <WFSection label="COVERAGE" pad="80px 0">
        <WFContainer>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 72, alignItems: 'center' }}>
            <div>
              <WFEyebrow>Coverage</WFEyebrow>
              <WFH2 style={{ marginBottom: 20 }}>Northern Alberta and Northeastern BC.</WFH2>
              <WFBody>
                Including the Peace Region on both sides of the provincial border. If you're in Fort St. John, Dawson Creek, Peace River, Grande Prairie, or a surrounding community — you're in scope. If you're not sure, ask.
              </WFBody>
            </div>
            <CoverageMap height={320} />
          </div>
        </WFContainer>
      </WFSection>

      <WFSection label="QUESTIONS" bg="#fafaf9">
        <WFContainer width={900}>
          <WFEyebrow>Common questions</WFEyebrow>
          <WFH2 style={{ marginBottom: 32 }}>Answered plainly.</WFH2>
          <div style={{ borderTop: '1px solid #1a1a1a' }}>
            {faqs.map(([q, a], i) => (
              <div key={i} style={{ borderBottom: '1px solid #e5e5e2' }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                  width: '100%', padding: '22px 0', background: 'transparent', border: 'none',
                  cursor: 'pointer', fontFamily: 'Georgia, serif', fontSize: 19, color: '#1a1a1a',
                  textAlign: 'left', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
                }}>
                  <span style={{ display: 'flex', gap: 20, alignItems: 'baseline' }}>
                    <span style={{ fontSize: 11, letterSpacing: '0.14em', fontFamily: 'ui-monospace, Menlo, monospace', color: '#6b6b66' }}>{String(i + 1).padStart(2, '0')}</span>
                    {q}
                  </span>
                  <span style={{ fontSize: 20, color: '#6b6b66' }}>{open === i ? '−' : '+'}</span>
                </button>
                {open === i && <div style={{ paddingBottom: 24, paddingLeft: 52 }}><WFBody>{a}</WFBody></div>}
              </div>
            ))}
          </div>
        </WFContainer>
      </WFSection>

      <FinalCTA nav={nav} />
      <WFFooter nav={nav} />
    </WFPage>
  );
};

// ─────────────────── SAFETY + COMPLIANCE ───────────────────
const SafetyPage = ({ nav }) => (
  <WFPage label="03 Safety + Compliance">
    <WFNav currentPage="safety" nav={nav} />
    <WFSection pad="72px 0 48px" border="none">
      <WFContainer>
        <WFEyebrow>Safety + Compliance</WFEyebrow>
        <WFH1 style={{ marginBottom: 28, maxWidth: '20ch' }}>A regulatory framework, built into how we run.</WFH1>
        <WFLede>
          Every Skytech show is flown under a Special Flight Operations Certificate for RPAS, coordinated through NAV Canada, and documented for municipal procurement review. This page is written for the procurement officer, the insurer, and the event coordinator who needs to know what we run before they sign.
        </WFLede>
      </WFContainer>
    </WFSection>

    <WFSection pad="0 0 64px" border="none">
      <WFContainer><CredStrip /></WFContainer>
    </WFSection>

    <WFSection label="FRAMEWORK" pad="64px 0">
      <WFContainer>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
          {[
            { t: 'Authorization · SFOC-RPAS', b: 'A Special Flight Operations Certificate for RPAS is required for every Skytech show. This is not conditional. Lead time for authorization is built into every project timeline.' },
            { t: 'Airspace · NAV Canada', b: 'NAV Drone is the required planning and authorization platform. Every show receives airspace review and NOTAM filing where required.' },
            { t: 'Pilot qualifications · Transport Canada', b: 'Pilot Certificate — Advanced Operations is required for the pilot-in-command. All permanent crew work to Skytech\'s internal operational standard.' },
            { t: 'Insurance', b: 'Specialized liability coverage framed under NAICS 711190 — Other Performing Arts Companies. Certificates of insurance are provided with every municipal contract.' },
            { t: 'Site planning', b: 'Every show site is planned with flight box, safety buffer, audience separation, launch pad layout, and ground control station before any flight authorization is requested.' },
            { t: 'Go / no-go process', b: 'Defined criteria on wind, precipitation, temperature, and visibility, measured on-site. Anemometer reading pre-flight. Cancellation and rescheduling terms are built into every contract.' },
          ].map((c, i) => (
            <div key={i} style={{ borderTop: '1px solid #1a1a1a', paddingTop: 20 }}>
              <WFH2 style={{ fontSize: 22, marginBottom: 12 }}>{c.t}</WFH2>
              <WFBody>{c.b}</WFBody>
            </div>
          ))}
        </div>
      </WFContainer>
    </WFSection>

    <WFSection label="FIRE RESTRICTION SEASONS" bg="#f4f4f0">
      <WFContainer>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
          <div>
            <WFEyebrow>Fire restriction seasons</WFEyebrow>
            <WFH2 style={{ marginBottom: 24 }}>An operational fact for Northern Alberta event planning.</WFH2>
          </div>
          <div>
            <WFBody style={{ marginBottom: 20 }}>
              Drone light shows produce no combustion and no ground debris from the aerial display itself. The format is operationally viable during fire restriction seasons when other show formats may be restricted or unavailable.
            </WFBody>
            <WFBody>
              We confirm the specific regulatory status for every event site and date. We do not claim drones are silent, have zero environmental impact, or have no effect on wildlife. We make accurate, specific claims.
            </WFBody>
          </div>
        </div>
      </WFContainer>
    </WFSection>

    <WFSection label="SITE PLAN · REFERENCE" pad="80px 0">
      <WFContainer>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <WFEyebrow>Reference site plan</WFEyebrow>
            <WFH2 style={{ marginBottom: 20 }}>The flight box is the starting point for every show.</WFH2>
            <WFBody style={{ marginBottom: 16 }}>
              A Skytech site plan begins with the flight box — the controlled volume of airspace in which drones operate. Every other element radiates outward: safety buffer, audience separation, launch pads, ground control.
            </WFBody>
            <WFBody>
              Clients receive a site plan specific to their venue before the contract is signed. This is the document a fire department, insurer, or procurement reviewer would read.
            </WFBody>
          </div>
          <SitePlanDiagram height={340} />
        </div>
      </WFContainer>
    </WFSection>

    <FinalCTA nav={nav} />
    <WFFooter nav={nav} />
  </WFPage>
);

// ─────────────────── PORTFOLIO ───────────────────
const PortfolioPage = ({ nav }) => (
  <WFPage label="04 Portfolio">
    <WFNav currentPage="portfolio" nav={nav} />
    <WFSection pad="72px 0 48px" border="none">
      <WFContainer>
        <WFEyebrow>Portfolio</WFEyebrow>
        <WFH1 style={{ marginBottom: 28, maxWidth: '22ch' }}>
          Summer 2026 — First season shows confirmed.
        </WFH1>
        <WFLede>
          Original footage and event documentation will be added here as our first season progresses. Skytech is based in Grande Prairie and operates across Northern Alberta and Northeastern BC. We do not use stock imagery or other operators' footage.
        </WFLede>
      </WFContainer>
    </WFSection>

    <WFSection label="FORMATS · PLACEHOLDERS" pad="48px 0 80px">
      <WFContainer>
        {[
          {
            size: 'Small Format',
            drones: '20 to 50 drones',
            desc: 'Shorter duration, simpler formations. Private activations, intimate corporate events, smaller community gatherings.',
            img: 'Drone formation in simple geometric shapes, photographed at dusk above an open field. Low horizon, clear sky. Approximately 400 × 300px.',
          },
          {
            size: 'Mid Format',
            drones: '75 to 100 drones',
            desc: 'Community-grade show. Logos, themed sequences, and sponsor segments. The typical municipality or festival engagement.',
            img: 'Drone formation spelling a custom logo or themed shape, photographed from ground level looking up. Crowd silhouette at base of frame. Approximately 400 × 300px.',
          },
          {
            size: 'Large Format',
            drones: '150 to 200+ drones',
            desc: 'Higher density visuals, multiple themed sequences, and more custom content. Flagship public events and headline moments.',
            img: 'Large formation sequence over a crowd, aerial or elevated perspective. Multiple elements visible in frame. Approximately 400 × 300px.',
          },
        ].map((f, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 48,
            padding: '48px 0',
            borderTop: '1px solid #e5e5e2',
            alignItems: 'center',
          }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '0.14em', fontFamily: 'ui-monospace, Menlo, monospace', color: '#6b6b66', marginBottom: 10 }}>{f.drones}</div>
              <WFH2 style={{ marginBottom: 16 }}>{f.size}</WFH2>
              <WFBody style={{ marginBottom: 24 }}>{f.desc}</WFBody>
              <div style={{ padding: 16, background: '#f4f4f0', border: '1px solid #e5e5e2', fontSize: 13, color: '#6b6b66', fontFamily: 'ui-monospace, Menlo, monospace', letterSpacing: '0.04em', lineHeight: 1.6 }}>
                Footage from first {f.size.toLowerCase()} engagement will be added here post-show.
              </div>
            </div>
            <WFImage kind="image" size="approx. 400 × 300px" description={f.img} aspect="4 / 3" />
          </div>
        ))}
      </WFContainer>
    </WFSection>

    <WFSection label="SEASON NOTE" bg="#1a1a1a" pad="64px 0">
      <WFContainer>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#a3a39e', fontFamily: 'ui-monospace, Menlo, monospace', marginBottom: 16 }}>A note on timing</div>
            <WFH2 style={{ color: '#fafaf9' }}>
              Skytech's first operating season is summer 2026. Footage and event documentation will populate this page as shows are completed.
            </WFH2>
          </div>
          <div style={{ color: '#c8c8c4', fontSize: 15, lineHeight: 1.6 }}>
            We do not use stock imagery, vendor demonstration reels, or other operators' footage. When you see work on this page, it will be ours.
          </div>
        </div>
      </WFContainer>
    </WFSection>

    <FinalCTA nav={nav} />
    <WFFooter nav={nav} />
  </WFPage>
);

// ─────────────────── CONTACT ───────────────────
const ContactPage = ({ nav }) => {
  const fields = [
    { k: 'Name', type: 'text', placeholder: 'Your name' },
    { k: 'Organization', type: 'text', placeholder: 'Municipality, festival, company' },
    { k: 'Email', type: 'email', placeholder: 'you@organization.ca' },
    { k: 'Event type', type: 'select', options: ['Canada Day / civic holiday', 'Festival or fair', 'Tourism / destination event', 'Corporate milestone', 'Private event', 'Other'] },
    { k: 'Proposed date', type: 'text', placeholder: 'Approximate is fine' },
    { k: 'Event location', type: 'text', placeholder: 'Town, venue, or general area' },
    { k: 'Approximate audience size', type: 'select', options: ['Under 500', '500 – 2,000', '2,000 – 10,000', '10,000+', 'Not sure yet'] },
    { k: 'How did you find us', type: 'select', options: ['RFQ / tender', 'Referral', 'Chamber of Commerce', 'Web search', 'Other'] },
    { k: 'Anything else', type: 'textarea', placeholder: 'Constraints, questions, context' },
  ];
  return (
    <WFPage label="05 Contact">
      <WFNav currentPage="contact" nav={nav} />
      <WFSection pad="72px 0 48px" border="none">
        <WFContainer>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }}>
            <div>
              <WFEyebrow>Contact · Request a Quote</WFEyebrow>
              <WFH1 style={{ marginBottom: 28 }}>Tell us about your event.</WFH1>
              <WFLede style={{ marginBottom: 40 }}>
                We will respond in writing with a feasibility note and a proposal scope. If your date is too close or the format isn't the right fit, we'll say so plainly.
              </WFLede>

              <div style={{ borderTop: '1px solid #e5e5e2', paddingTop: 24, marginBottom: 32 }}>
                <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', fontFamily: 'ui-monospace, Menlo, monospace', color: '#6b6b66', marginBottom: 14 }}>Direct contact</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 15 }}>
                  <div><strong style={{ fontFamily: 'Georgia, serif', fontWeight: 400 }}>Matt Best</strong> — matt@skytechdroneshows.com</div>
                  <div><strong style={{ fontFamily: 'Georgia, serif', fontWeight: 400 }}>David Wurz</strong> — david@skytechdroneshows.com</div>
                  <div style={{ color: '#6b6b66', fontSize: 13, marginTop: 6 }}>Grande Prairie, Alberta · Serving Northern Alberta and Northeastern BC, including the Peace Region.</div>
                </div>
              </div>

              <div style={{ padding: 20, background: '#f4f4f0', border: '1px solid #e5e5e2', fontSize: 13, color: '#3a3a36', lineHeight: 1.6 }}>
                <strong style={{ fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#6b6b66', display: 'block', marginBottom: 8 }}>Municipal procurement</strong>
                For RFQ or tender processes, contact us directly and we'll engage through your procurement portal. Skytech is registered for GST/HST and carries project-specific documentation suited to institutional buyers.
              </div>
            </div>

            <div style={{ border: '1px solid #1a1a1a', padding: 40, background: '#fff' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28, paddingBottom: 20, borderBottom: '1px solid #e5e5e2' }}>
                <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', fontFamily: 'ui-monospace, Menlo, monospace', color: '#6b6b66' }}>Quote request</div>
                <div style={{ fontSize: 11, fontFamily: 'ui-monospace, Menlo, monospace', color: '#6b6b66' }}>{fields.length} fields</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
                {fields.map((f, i) => (
                  <div key={i}>
                    <label style={{ fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', fontFamily: 'ui-monospace, Menlo, monospace', color: '#6b6b66', display: 'block', marginBottom: 8 }}>{f.k}</label>
                    {f.type === 'select' ? (
                      <select style={contactInputStyle}>
                        <option>Select…</option>
                        {f.options.map(o => <option key={o}>{o}</option>)}
                      </select>
                    ) : f.type === 'textarea' ? (
                      <textarea placeholder={f.placeholder} rows={4} style={{ ...contactInputStyle, resize: 'vertical' }} />
                    ) : (
                      <input type={f.type} placeholder={f.placeholder} style={contactInputStyle} />
                    )}
                  </div>
                ))}
              </div>
              <button style={{
                width: '100%', marginTop: 32, padding: '16px',
                background: '#1a1a1a', color: '#fafaf9',
                border: '1px solid #1a1a1a', borderRadius: 0,
                fontSize: 15, fontFamily: 'inherit', fontWeight: 500, cursor: 'pointer',
              }}>Submit Request →</button>
            </div>
          </div>
        </WFContainer>
      </WFSection>
      <WFFooter nav={nav} />
    </WFPage>
  );
};

const contactInputStyle = {
  width: '100%', padding: '11px 14px',
  border: '1px solid #d4d4d0', borderRadius: 0,
  background: '#fafaf9', fontFamily: 'inherit', fontSize: 14,
  color: '#1a1a1a', outline: 'none', boxSizing: 'border-box',
};

Object.assign(window, { ServicesPage, SafetyPage, PortfolioPage, ContactPage });