// sections-mid.jsx — Intro, Services, Subindustry hub, Values strip, Trust logos.

/* ============================================================ */
/*  Introduction — pain-point H2 + empathy paragraph             */
/* ============================================================ */
const Intro = ({ industry }) => (
  <section style={{ background: '#fff', padding: '88px 32px 56px' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <h2 style={{
        fontFamily: 'Comfortaa', fontWeight: 500, fontSize: 'clamp(28px, 3.4vw, 40px)',
        color: 'var(--ue-deep)', margin: '0 0 22px',
        letterSpacing: '-0.01em', lineHeight: 1.15, textWrap: 'balance',
      }}>
        Frustrated with slow leads, ghosted ads, and SEO that just <em style={{ fontStyle: 'italic', color: 'var(--ue-deep)', fontWeight: 600 }}>won't move?</em>
      </h2>
      <p style={{
        fontFamily: 'Montserrat', fontWeight: 300, fontSize: 17, lineHeight: 1.7,
        color: 'var(--fg-1)', margin: '0 0 18px',
      }}>
        You didn't get into the {industry.toLowerCase()} business to babysit a Google Ads dashboard. You're tired of agencies that promise the moon, hand you a screenshot of impressions, then ask for a renewal. You want phones ringing, calendars filling, and a plan you can actually explain to your team.
      </p>
      <p style={{
        fontFamily: 'Montserrat', fontWeight: 300, fontSize: 17, lineHeight: 1.7,
        color: 'var(--fg-1)', margin: 0,
      }}>
        We get it — and we built Upward Engine to fix it. Every campaign we run for [INDUSTRY] companies is measured against revenue, not vanity metrics. You'll know exactly what each dollar bought you, what's working, and what we're cutting next.
      </p>
    </div>
  </section>
);

/* ============================================================ */
/*  Services — three H3 service blocks                           */
/* ============================================================ */
const Services = ({ industry, ctaColor }) => {
  const services = [
    {
      icon: 'search',
      title: 'SEO',
      tag: 'Built to compound',
      body: `Technical, on-page, and content SEO tuned for the way ${industry.toLowerCase()} customers actually search. We rank you for the queries that bring qualified leads — not just traffic.`,
      bullets: ['Local SEO + map pack', 'Service-page content', 'Schema + site speed'],
      cta: 'Explore our SEO services',
    },
    {
      icon: 'megaphone',
      title: 'Paid media',
      tag: 'Every click defended',
      body: `Google, Meta, YouTube, and Local Services Ads, managed by humans who treat your ad budget like their own. Tight tracking, ruthless cost-per-lead targets, weekly optimization.`,
      bullets: ['Search + LSA', 'Geo-fenced display', 'Conversion tracking'],
      cta: 'See our paid media playbook',
    },
    {
      icon: 'layout-panel-left',
      title: 'Web design & creative',
      tag: 'Built to convert',
      body: `Fast, mobile-first ${industry.toLowerCase()} websites with the trust signals, calls-to-action, and forms that turn visitors into booked jobs. Plus the photo, video, and copy to bring it to life.`,
      bullets: ['Conversion-first design', 'Photo + video production', 'Copywriting that sells'],
      cta: 'View web & creative services',
    },
  ];

  return (
    <section id="services" style={{ background: 'var(--ue-off-white)', padding: '88px 32px 96px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 760, marginLeft: 'auto', marginRight: 'auto' }}>
          <h2 style={{
            fontFamily: 'Comfortaa', fontWeight: 500, fontSize: 'clamp(30px, 3.6vw, 42px)',
            color: 'var(--ue-midnight)', margin: '0 0 14px',
            letterSpacing: '-0.01em', lineHeight: 1.15,
          }}>
            Our formula for <span style={{ color: 'var(--ue-deep)' }}>{industry.toLowerCase()} marketing success.</span>
          </h2>
          <p style={{
            fontFamily: 'Montserrat', fontWeight: 300, fontSize: 17.5, lineHeight: 1.65,
            color: 'var(--fg-3)', margin: 0,
          }}>
            Three services, one connected plan. We start where your numbers say to start — then layer in the rest as ROI proves out.
          </p>
        </div>

        <div className="ue-services-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, alignItems: 'stretch' }}>
          {services.map((s, i) => (
            <article key={s.title} style={{
              background: '#fff', borderRadius: '0 0 150px 0',
              padding: 32,
              boxShadow: '0 1px 2px rgba(21,22,65,0.08)',
              display: 'flex', flexDirection: 'column', gap: 16,
              position: 'relative', overflow: 'hidden',
              transition: 'box-shadow 250ms cubic-bezier(.2,.8,.2,1), transform 250ms cubic-bezier(.2,.8,.2,1)',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.boxShadow = '0 16px 32px rgba(21,22,65,0.14)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.boxShadow = '0 1px 2px rgba(21,22,65,0.08)'; e.currentTarget.style.transform = 'none'; }}
            >
              {/* number marker top-right */}
              <div style={{
                position: 'absolute', right: 24, top: 20,
                fontFamily: 'Comfortaa', fontWeight: 700, fontSize: 36,
                color: 'rgba(33,66,139,0.10)', lineHeight: 1,
              }}>0{i+1}</div>

              <div style={{
                width: 52, height: 52, borderRadius: 12,
                background: 'linear-gradient(135deg, var(--ue-deep) 0%, var(--ue-sky) 100%)',
                color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: '0 4px 12px rgba(33,66,139,0.20)',
              }}>
                <Icon name={s.icon} size={24} color="#fff" />
              </div>

              <div>
                <div style={{ fontFamily: 'Montserrat', fontSize: 11, fontWeight: 600, color: 'var(--ue-sky)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>{s.tag}</div>
                <h3 style={{ fontFamily: 'Comfortaa', fontWeight: 700, fontSize: 26, color: 'var(--ue-midnight)', margin: '0 0 12px', letterSpacing: '-0.01em' }}>{s.title}</h3>
                <p style={{ fontFamily: 'Montserrat', fontWeight: 300, fontSize: 15, lineHeight: 1.65, color: 'var(--fg-3)', margin: 0 }}>{s.body}</p>
              </div>

              <ul style={{ listStyle: 'none', padding: 0, margin: '4px 0 0', display: 'flex', flexDirection: 'column', gap: 8 }}>
                {s.bullets.map(b => (
                  <li key={b} style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'Montserrat', fontSize: 13.5, color: 'var(--ue-midnight)', fontWeight: 500 }}>
                    <Icon name="check-circle-2" size={16} color="var(--ue-sky)" /> {b}
                  </li>
                ))}
              </ul>

              <a href="#lead-form" style={{
                fontFamily: 'Montserrat', fontWeight: 600, fontSize: 14,
                color: 'var(--ue-deep)', textDecoration: 'none',
                display: 'inline-flex', alignItems: 'center', gap: 6,
                marginTop: 'auto', paddingTop: 8,
              }}>{s.cta} <Icon name="arrow-right" size={16} /></a>
            </article>
          ))}
        </div>

        <div style={{ textAlign: 'center', marginTop: 56 }}>
          <Button variant={ctaColor} size="lg" as="a" href="#lead-form">
            Get your custom marketing plan <Icon name="arrow-right" size={18} />
          </Button>
          <div style={{ fontFamily: 'Montserrat', fontSize: 13, color: 'var(--fg-3)', marginTop: 14 }}>
            Free strategy review · No credit card · Reply within 1 business day
          </div>
        </div>
      </div>
    </section>
  );
};

/* ============================================================ */
/*  Subindustry hub — "Businesses we serve"                      */
/* ============================================================ */
const Subindustries = ({ industry, subIndustries }) => (
  <section id="industries" style={{ background: '#fff', padding: '88px 32px' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, marginBottom: 32, flexWrap: 'wrap' }}>
        <div style={{ maxWidth: 640 }}>
          <h2 style={{
            fontFamily: 'Comfortaa', fontWeight: 500, fontSize: 'clamp(28px, 3.2vw, 38px)',
            color: 'var(--ue-midnight)', margin: '0 0 12px',
            letterSpacing: '-0.01em', lineHeight: 1.15,
          }}>
            Businesses we serve.
          </h2>
          <p style={{ fontFamily: 'Montserrat', fontWeight: 300, fontSize: 16.5, lineHeight: 1.6, color: 'var(--fg-3)', margin: 0 }}>
            We've shipped plans for every flavor of {industry.toLowerCase()} company. Pick your specialty — we'll show you the playbooks that work.
          </p>
        </div>
        <a href="#all-industries" style={{
          fontFamily: 'Montserrat', fontWeight: 600, fontSize: 14,
          color: 'var(--ue-deep)', textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>See all industries we serve <Icon name="arrow-right" size={16} /></a>
      </div>

      <div className="ue-subind-grid" style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12,
      }}>
        {subIndustries.map(s => (
          <a key={s.label} href="#" style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '14px 16px', borderRadius: 10,
            background: 'var(--ue-off-white)',
            border: '1px solid transparent',
            fontFamily: 'Montserrat', fontWeight: 500, fontSize: 14,
            color: 'var(--ue-midnight)', textDecoration: 'none',
            transition: 'all 150ms cubic-bezier(.2,.8,.2,1)',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.borderColor = 'var(--ue-sky)'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(21,22,65,0.08)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--ue-off-white)'; e.currentTarget.style.borderColor = 'transparent'; e.currentTarget.style.boxShadow = 'none'; }}
          >
            <div style={{
              width: 36, height: 36, borderRadius: 8,
              background: 'rgba(46,168,217,0.14)', color: 'var(--ue-deep)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <Icon name={s.icon} size={18} />
            </div>
            <span style={{ flex: 1 }}>{s.label}</span>
            <Icon name="arrow-up-right" size={14} color="var(--fg-muted)" />
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ============================================================ */
/*  Why Upward Engine — "Our Values" three-card strip            */
/*  (Matches upwardengine.com homepage Our Values block.)        */
/* ============================================================ */
const WhyUpwardEngine = ({ industry }) => {
  const values = [
    {
      title: 'Be Transparent',
      body: `We provide clear, detailed reports of the work being performed and outline specific deliverables within each of our programs. You'll know exactly what you're getting for your investment in ${industry.toLowerCase()} marketing.`,
      bg: 'var(--ue-sky)', // Sky Blue
    },
    {
      title: 'Get Results',
      body: `Our goal is to establish a positive return on investment (ROI) within months of working with us. We make sure it's easy to tell that your investment with us is absolutely worth it.`,
      bg: 'var(--ue-deep)', // Deep Blue
    },
    {
      title: 'Earn Loyalty',
      body: `We aim to earn loyalty by delivering measurable ROI and offering flexibility with no long term contractual obligations. We believe in earning your business month over month.`,
      bg: 'var(--ue-midnight)', // Midnight
    },
  ];
  return (
    <section id="approach" style={{ background: 'var(--ue-off-white)', padding: '96px 32px 104px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <h2 style={{
          fontFamily: 'Comfortaa', fontWeight: 500, fontSize: 'clamp(32px, 3.6vw, 44px)',
          color: 'var(--ue-midnight)', margin: '0 0 56px',
          letterSpacing: '-0.01em', lineHeight: 1.15,
        }}>
          Our Values
        </h2>
        <div className="ue-values-strip" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32,
        }}>
          {values.map(v => (
            <div key={v.title} style={{
              background: v.bg,
              color: '#fff',
              borderRadius: '24px 0 96px 0',
              padding: '40px 36px 44px',
              minHeight: 360,
              display: 'flex', flexDirection: 'column', gap: 22,
              boxShadow: '0 8px 24px rgba(21, 22, 65, 0.10)',
              transition: 'transform 250ms cubic-bezier(.2,.8,.2,1), box-shadow 250ms cubic-bezier(.2,.8,.2,1)',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 16px 32px rgba(21,22,65,0.18)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(21, 22, 65, 0.10)'; }}
            >
              <h3 style={{
                fontFamily: 'Comfortaa', fontWeight: 700, fontSize: 32, color: '#fff',
                margin: 0, letterSpacing: '-0.005em', lineHeight: 1.15,
              }}>{v.title}</h3>
              <p style={{
                fontFamily: 'Montserrat', fontWeight: 300, fontSize: 16, lineHeight: 1.7,
                color: 'rgba(255,255,255,0.92)', margin: 0,
              }}>{v.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============================================================ */
/*  Awards — single-row strip of real partner / press logos      */
/* ============================================================ */
const Awards = () => {
  // Heights tuned so each lockup reads at roughly the same optical weight in the row.
  const items = [
    { src: 'assets/awards/google-partner.svg', alt: 'Google Partner Premier 2026',                h: 64 },
    { src: 'assets/awards/inc5000.png',        alt: 'Inc. 5000',                                  h: 52 },
    { src: 'assets/awards/clutch-global.png',  alt: 'Clutch Global 2024',                         h: 70 },
    { src: 'assets/awards/inc5000-rank.png',   alt: 'Inc. 5000 No. 373 — Advertising & Marketing 2022', h: 60 },
    { src: 'assets/awards/clutch-reviews.png', alt: 'Reviewed on Clutch — 62 Reviews',            h: 44 },
    { src: 'assets/awards/google-reviews.png', alt: 'Google — 5 stars — 100+ Reviews',           h: 48 },
    { src: 'assets/awards/forbes.png',         alt: 'Forbes',                                     h: 38 },
  ];
  return (
    <section id="awards" style={{ background: 'var(--ue-off-white)', padding: '56px 32px 60px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <h2 style={{
          fontFamily: 'Comfortaa', fontWeight: 500, fontSize: 'clamp(22px, 2.4vw, 30px)',
          color: 'var(--ue-deep)', margin: '0 0 36px',
          letterSpacing: '-0.01em', lineHeight: 1.15,
        }}>
          Our Awards
        </h2>
        <div className="ue-awards-row" style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 32, flexWrap: 'wrap',
        }}>
          {items.map((it) => (
            <img key={it.src} src={it.src} alt={it.alt}
              style={{ height: it.h, width: 'auto', objectFit: 'contain', flex: '0 0 auto', maxWidth: '100%' }}
            />
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Intro, Services, Subindustries, WhyUpwardEngine, Awards });