// sections-end.jsx — Case studies, FAQs, Blog roll, Final CTA, Footer.

// Brand glyph paths for social links (Lucide dropped brand marks due to trademark concerns).
// Single-path SVGs sized for a 24×24 viewBox.
const SOCIAL_ICONS = [
  {
    name: 'LinkedIn',
    path: 'M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z'
  },
  {
    name: 'Facebook',
    path: 'M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.24 2.69.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'
  },
  {
    name: 'Instagram',
    path: 'M12 2.16c3.2 0 3.58.02 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.05 1.27.07 1.65.07 4.85 0 3.2-.02 3.58-.07 4.85-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.05-1.65.07-4.85.07-3.2 0-3.58-.02-4.85-.07-1.17-.05-1.8-.25-2.23-.41a3.72 3.72 0 0 1-1.38-.9 3.72 3.72 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23-.05-1.27-.07-1.65-.07-4.85 0-3.2.02-3.58.07-4.85.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.18 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63a5.88 5.88 0 0 0-2.13 1.38A5.88 5.88 0 0 0 .63 4.14C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.31.79.73 1.46 1.38 2.13.67.65 1.34 1.07 2.13 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.88 5.88 0 0 0 2.13-1.38 5.88 5.88 0 0 0 1.38-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91A5.88 5.88 0 0 0 21.99 2.01 5.88 5.88 0 0 0 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.4-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z'
  },
  {
    name: 'YouTube',
    path: 'M23.5 6.2a3 3 0 0 0-2.12-2.12C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.53A3 3 0 0 0 .5 6.2C0 8.08 0 12 0 12s0 3.92.5 5.8a3 3 0 0 0 2.12 2.12c1.88.53 9.38.53 9.38.53s7.5 0 9.38-.53A3 3 0 0 0 23.5 17.8c.5-1.88.5-5.8.5-5.8s0-3.92-.5-5.8zM9.55 15.57V8.43L15.82 12l-6.27 3.57z'
  },
];

/* ============================================================ */
/*  Case studies — 2x2 horizontal split-cards (upwardengine.com/our-work) */
/* ============================================================ */
const CaseStudies = ({ industry, companyType }) => {
  const tagColors = {
    SEO:          { bg: 'var(--ue-deep)',  fg: '#fff' },
    'Paid Media': { bg: 'var(--ue-ember)', fg: '#fff' },
    Web:          { bg: 'var(--ue-sky)',   fg: '#fff' },
  };

  const cases = [
    {
      tags: ['SEO'],
      title: `National [INDUSTRY] [COMPANY TYPE]: SEO Case Study`,
      body:  `A B2B ${industry.toLowerCase()} ${companyType.toLowerCase()} with 40+ years of experience needed stronger non-branded visibility for the specialized equipment their buyers were searching for.`,
      art:   'mountains',
    },
    {
      tags: ['Paid Media', 'SEO'],
      title: `[CLIENT NAME] [SUB-INDUSTRY] [COMPANY TYPE]: SEO & PPC Case Study`,
      body:  `A regional ${industry.toLowerCase()} ${companyType.toLowerCase()} was only filling about 30% of their seasonal availability when they came to us. Through aggressive paid and organic work,`,
      art:   'cabin',
    },
    {
      tags: ['Paid Media', 'SEO'],
      title: `National [SUB-INDUSTRY] Certification Company: SEO, PPC & Social Ads Case Study`,
      body:  `A newly launched ${industry.toLowerCase()} certification platform needed to ramp digital marketing fast. Over a 2-month engagement, we layered SEO,`,
      art:   'arrows',
    },
    {
      tags: ['SEO'],
      title: `[CITY] [SUB-INDUSTRY] [COMPANY TYPE]: SEO Case Study`,
      body:  `A new [STATE]-based ${companyType.toLowerCase()} was virtually invisible on Google when they came to us. Through targeted SEO and a rebuilt content footprint,`,
      art:   'compass',
    },
  ];

  return (
    <section id="case-studies" style={{ background: '#fff', padding: '88px 32px 96px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, marginBottom: 48, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 700 }}>
            <h2 style={{
              fontFamily: 'Comfortaa', fontWeight: 500, fontSize: 'clamp(28px, 3.4vw, 40px)',
              color: 'var(--ue-midnight)', margin: '0 0 12px',
              letterSpacing: '-0.01em', lineHeight: 1.15,
            }}>
              How we help <span style={{ color: 'var(--ue-deep)' }}>{industry.toLowerCase()} companies</span> grow.
            </h2>
            <p style={{ fontFamily: 'Montserrat', fontWeight: 300, fontSize: 16.5, lineHeight: 1.65, color: 'var(--fg-3)', margin: 0 }}>
              A few of our favorite client stories. Real budgets, real results, real owners willing to put their name on it.
            </p>
          </div>
          <a href="#all-case-studies" style={{
            fontFamily: 'Montserrat', fontWeight: 600, fontSize: 14,
            color: 'var(--ue-deep)', textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>See all case studies <Icon name="arrow-right" size={16} /></a>
        </div>

        <div className="ue-case-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {cases.map((c, i) => (
            <article key={i} className="ue-case-card" style={{
              background: 'var(--ue-off-white)', borderRadius: 4, overflow: 'hidden',
              display: 'grid', gridTemplateColumns: '1fr 1fr',
              minHeight: 320,
              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.12)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'none'; }}
            >
              {/* Left: copy */}
              <div style={{ padding: '32px 32px 28px', display: 'flex', flexDirection: 'column', gap: 18 }}>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  {c.tags.map(t => {
                    const tc = tagColors[t] || tagColors.SEO;
                    return (
                      <span key={t} style={{
                        background: tc.bg, color: tc.fg,
                        fontFamily: 'Montserrat', fontWeight: 600, fontSize: 12,
                        padding: '5px 11px', borderRadius: 4, letterSpacing: '0.02em',
                      }}>{t}</span>
                    );
                  })}
                </div>
                <h3 style={{
                  fontFamily: 'Comfortaa', fontWeight: 700, fontSize: 'clamp(20px, 1.7vw, 24px)',
                  color: 'var(--ue-deep)', margin: 0, lineHeight: 1.25, letterSpacing: '-0.005em',
                }}>{c.title}</h3>
                <p style={{
                  fontFamily: 'Montserrat', fontWeight: 300, fontSize: 14.5, lineHeight: 1.65,
                  color: 'var(--fg-3)', margin: 0,
                }}>{c.body}</p>
                <a href="#" style={{
                  fontFamily: 'Montserrat', fontWeight: 600, fontSize: 14,
                  color: 'var(--ue-deep)', textDecoration: 'none',
                  marginTop: 'auto', alignSelf: 'flex-start',
                }}>Read More...</a>
              </div>
              {/* Right: illustration */}
              <div style={{
                background: 'linear-gradient(135deg, rgba(46,168,217,0.10) 0%, rgba(46,168,217,0.22) 100%)',
                position: 'relative', overflow: 'hidden',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                padding: 16,
              }}>
                <CaseIllustration kind={c.art} />
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// Abstract upward-arrow illustrations that mirror the upwardengine.com case-study art.
const CaseIllustration = ({ kind }) => {
  if (kind === 'mountains') {
    return (
      <svg viewBox="0 0 320 240" style={{ width: '78%', height: 'auto' }}>
        <defs>
          <linearGradient id="ci-m1" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%"   stopColor="#2EA8D9" stopOpacity="0.55" />
            <stop offset="100%" stopColor="#2EA8D9" stopOpacity="0.10" />
          </linearGradient>
        </defs>
        <polygon points="160,40 100,200 220,200" fill="url(#ci-m1)" stroke="#21428B" strokeWidth="1.5" />
        <polygon points="120,80 70,210 170,210" fill="rgba(46,168,217,0.35)" stroke="#21428B" strokeWidth="1.2" />
        <polygon points="200,90 150,210 250,210" fill="rgba(46,168,217,0.25)" stroke="#21428B" strokeWidth="1.2" />
        <circle cx="160" cy="100" r="14" fill="#fff" stroke="#21428B" strokeWidth="1.5" />
        <path d="M154 102 L160 94 L166 102 L163 102 L163 110 L157 110 L157 102 Z" fill="#21428B" />
        {[[60,60],[260,70],[40,150],[280,160],[180,30]].map(([x,y],i)=>(
          <circle key={i} cx={x} cy={y} r="2" fill="#21428B" opacity="0.5" />
        ))}
      </svg>
    );
  }
  if (kind === 'cabin') {
    return (
      <svg viewBox="0 0 320 240" style={{ width: '82%', height: 'auto' }}>
        <defs>
          <linearGradient id="ci-c1" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%"   stopColor="#2EA8D9" stopOpacity="0.50" />
            <stop offset="100%" stopColor="#2EA8D9" stopOpacity="0.10" />
          </linearGradient>
        </defs>
        <polygon points="80,200 130,90 180,200" fill="url(#ci-c1)" stroke="#21428B" strokeWidth="1.5" />
        <polygon points="160,200 210,110 260,200" fill="rgba(46,168,217,0.30)" stroke="#21428B" strokeWidth="1.3" />
        <rect    x="138" y="150" width="44" height="40" fill="#fff" stroke="#21428B" strokeWidth="1.5" />
        <polygon points="138,150 160,128 182,150" fill="#21428B" />
        <rect    x="153" y="166" width="14" height="24" fill="#21428B" />
        <path d="M210 60 Q240 60 240 90" fill="none" stroke="#21428B" strokeWidth="1.5" />
        <path d="M220 60 Q235 60 235 75" fill="none" stroke="#21428B" strokeWidth="1.2" />
        <circle cx="240" cy="55" r="3" fill="#21428B" />
        <line x1="40" y1="200" x2="290" y2="200" stroke="#21428B" strokeWidth="1.2" opacity="0.6" />
      </svg>
    );
  }
  if (kind === 'arrows') {
    return (
      <svg viewBox="0 0 320 240" style={{ width: '82%', height: 'auto' }}>
        <defs>
          <linearGradient id="ci-a1" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%"   stopColor="#2EA8D9" stopOpacity="0.55" />
            <stop offset="100%" stopColor="#2EA8D9" stopOpacity="0.10" />
          </linearGradient>
        </defs>
        {[60,120,180].map((x,i) => (
          <g key={i}>
            <rect x={x-8} y={200} width="16" height="20" fill="url(#ci-a1)" stroke="#21428B" strokeWidth="1" />
            <path d={`M${x},210 L${x},${130 - i*20} M${x},${130 - i*20} L${x-12},${145 - i*20} M${x},${130 - i*20} L${x+12},${145 - i*20}`}
                  stroke="#21428B" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
          </g>
        ))}
        <rect x="225" y="190" width="30" height="30" fill="url(#ci-a1)" stroke="#21428B" strokeWidth="1.2" />
        <path d="M240,210 L240,90 M240,90 L222,108 M240,90 L258,108"
              stroke="#21428B" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" opacity="0.85" />
        {[[50,50],[100,70],[200,40],[280,60],[300,150]].map(([x,y],i)=>(
          <circle key={i} cx={x} cy={y} r="2.5" fill="#21428B" opacity="0.45" />
        ))}
      </svg>
    );
  }
  // compass / radiating diamonds
  return (
    <svg viewBox="0 0 320 240" style={{ width: '78%', height: 'auto' }}>
      <defs>
        <linearGradient id="ci-x1" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0%"   stopColor="#2EA8D9" stopOpacity="0.45" />
          <stop offset="100%" stopColor="#2EA8D9" stopOpacity="0.10" />
        </linearGradient>
      </defs>
      <polygon points="160,40 200,120 160,200 120,120" fill="url(#ci-x1)" stroke="#21428B" strokeWidth="1.5" />
      <polygon points="60,120 130,90 130,150"          fill="rgba(46,168,217,0.30)" stroke="#21428B" strokeWidth="1.2" />
      <polygon points="260,120 190,90 190,150"         fill="rgba(46,168,217,0.30)" stroke="#21428B" strokeWidth="1.2" />
      <circle  cx="160" cy="120" r="12" fill="#fff" stroke="#21428B" strokeWidth="1.5" />
      <polygon points="160,108 164,120 160,132 156,120" fill="#21428B" />
      {[[40,40],[280,40],[40,200],[280,200]].map(([x,y],i)=>(
        <circle key={i} cx={x} cy={y} r="2.5" fill="#21428B" opacity="0.5" />
      ))}
    </svg>
  );
};

/* ============================================================ */
/*  FAQs — accordion                                             */
/* ============================================================ */
const FAQs = ({ industry, companyType }) => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    {
      q: `Why is SEO important for ${industry.toLowerCase()} companies?`,
      a: `SEO is how ${industry.toLowerCase()} customers find you the moment they need you — without you paying for every click. For most ${companyType.toLowerCase()}s, organic search drives 40–60% of qualified leads at a cost-per-lead that beats every paid channel. A strong local SEO foundation also makes every other channel cheaper: a well-optimized site converts paid traffic better, ranks faster, and earns the trust signals that close calls.`,
    },
    {
      q: `How long before I see results?`,
      a: `For paid media, we usually see meaningful changes in cost-per-lead within 30–45 days. For SEO, ranking improvements typically start around month 3 and compound from month 6 onward. We share weekly reports from day one so you can see exactly what's moving — and we'd rather show you small early wins than promise miracles we can't deliver.`,
    },
    {
      q: `Do you specialize in ${industry.toLowerCase()}, or work across industries?`,
      a: `${industry} is one of our largest practice areas — we've worked with ${companyType.toLowerCase()}s ranging from single-truck operators to multi-state franchises. That focus is why our [SUB-INDUSTRY] playbooks ship faster than a generalist agency could build them. We do also serve a small number of adjacent industries (see "Industries we serve" above).`,
    },
    {
      q: `What does a typical engagement look like — and what does it cost?`,
      a: `Most ${industry.toLowerCase()} clients start with a 90-day strategy sprint ($4–8K/mo depending on scope) followed by month-to-month management. We don't lock you into annual contracts, and you own every asset we produce. After your free strategy review, we'll send a custom plan with a clear scope and a clear price — no surprises.`,
    },
    {
      q: `Will I work directly with the people running my campaigns?`,
      a: `Yes. Every account gets a dedicated strategist who runs your weekly check-ins, owns your reporting, and has direct authority over your campaigns. No account-coordinator hand-offs, no offshore button-pushers. You get the person doing the work, on the phone, every week.`,
    },
    {
      q: `What happens if it isn't working?`,
      a: `We'll tell you first. Every plan we run has explicit success metrics agreed on up front. If we're not hitting them by month 3, we either fix the plan on our dime or part ways cleanly — you keep every asset and every account. We'd rather lose a client than waste your money.`,
    },
  ];

  return (
    <section id="faqs" style={{ background: '#fff', padding: '88px 32px' }}>
      <div className="ue-faq-grid" style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.7fr 1.3fr', gap: 56, alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: 96 }}>
          <h2 style={{
            fontFamily: 'Comfortaa', fontWeight: 500, fontSize: 'clamp(28px, 3.2vw, 38px)',
            color: 'var(--ue-midnight)', margin: '0 0 14px',
            letterSpacing: '-0.01em', lineHeight: 1.15,
          }}>
            Questions {industry.toLowerCase()} owners ask us most.
          </h2>
          <p style={{ fontFamily: 'Montserrat', fontWeight: 300, fontSize: 15.5, lineHeight: 1.65, color: 'var(--fg-3)', margin: '0 0 22px' }}>
            Have one we didn't cover? Send it over — we'll answer within a business day.
          </p>
          <Button variant="outline" size="md" as="a" href="#lead-form">
            <Icon name="message-circle" size={16} /> Ask us anything
          </Button>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderRadius: 10,
                background: isOpen ? 'var(--ue-off-white)' : '#fff',
                border: `1px solid ${isOpen ? 'transparent' : 'var(--ue-divider)'}`,
                transition: 'background 200ms cubic-bezier(.2,.8,.2,1)',
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', background: 'transparent', border: 0, cursor: 'pointer',
                  padding: '20px 22px', textAlign: 'left',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
                  fontFamily: 'Montserrat', fontWeight: 600, fontSize: 16, color: 'var(--ue-midnight)',
                }}>
                  <span style={{ flex: 1, lineHeight: 1.4 }}>{f.q}</span>
                  <span style={{
                    width: 32, height: 32, borderRadius: 999,
                    background: isOpen ? 'var(--ue-deep)' : 'rgba(33,66,139,0.08)',
                    color: isOpen ? '#fff' : 'var(--ue-deep)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                    transition: 'all 200ms cubic-bezier(.2,.8,.2,1)',
                  }}>
                    <Icon name={isOpen ? 'minus' : 'plus'} size={16} />
                  </span>
                </button>
                {isOpen && (
                  <div style={{ padding: '0 22px 22px', fontFamily: 'Montserrat', fontWeight: 300, fontSize: 15, lineHeight: 1.7, color: 'var(--fg-3)' }}>
                    {f.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

/* ============================================================ */
/*  Blog roll — "Industry Insights" (upwardengine.com homepage)  */
/* ============================================================ */
const BlogRoll = ({ industry }) => {
  const posts = [
    {
      title: `What Is Programmatic Display Advertising for [INDUSTRY] in 2026?`,
      excerpt: `Most advice about programmatic display advertising makes it sound cleaner than it is. Turn on automation, feed the platform some`,
      art: 'desk',
    },
    {
      title: `8 Media Plan Examples for [INDUSTRY] Companies (2026)`,
      excerpt: `Staring at a blank spreadsheet labeled "Media Plan" usually means the same three questions hit at once. How much should`,
      art: 'plan',
    },
    {
      title: `Unlock Growth with AI Marketing for ${industry} in 2026`,
      excerpt: `You're probably seeing the same thing most ${industry.toLowerCase()} owners are seeing right now. Every software company says it has`,
      art: 'ai',
    },
  ];

  return (
    <section id="blog" style={{ background: '#f8f8f8', padding: '96px 32px 104px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, marginBottom: 48, flexWrap: 'wrap' }}>
          <h2 style={{
            fontFamily: 'Comfortaa', fontWeight: 500, fontSize: 'clamp(28px, 3.4vw, 42px)',
            color: 'var(--ue-deep)', margin: 0,
            letterSpacing: '-0.01em', lineHeight: 1.15,
          }}>
            Industry Insights
          </h2>
          <a href="#all-blog" style={{
            fontFamily: 'Montserrat', fontWeight: 600, fontSize: 15,
            color: 'var(--ue-ember)', textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>Explore All Insights <span aria-hidden="true">→</span></a>
        </div>
        <div className="ue-blog-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40 }}>
          {posts.map((p, i) => (
            <a key={i} href="#" style={{
              display: 'flex', flexDirection: 'column', gap: 24,
              textDecoration: 'none',
              transition: 'transform 250ms cubic-bezier(.2,.8,.2,1)',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; }}
            >
              {/* Cover: leaf-shaped illustration card */}
              <div style={{
                background: 'var(--ue-off-white)',
                borderRadius: '4px 4px 4px 64px',
                aspectRatio: '16 / 9',
                position: 'relative', overflow: 'hidden',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <BlogCoverArt kind={p.art} title={p.title} />
              </div>
              {/* Title under cover */}
              <h3 style={{
                fontFamily: 'Comfortaa', fontWeight: 700,
                fontSize: 'clamp(26px, 2.4vw, 34px)',
                color: 'var(--ue-deep)', margin: 0,
                lineHeight: 1.18, letterSpacing: '-0.01em',
              }}>{p.title}</h3>
              {/* Excerpt */}
              <p style={{
                fontFamily: 'Montserrat', fontWeight: 300, fontSize: 16,
                lineHeight: 1.7, color: 'var(--fg-1)', margin: 0,
              }}>{p.excerpt}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// Decorative cover artwork — sketch-style Deep Blue line marks on cream,
// with the post title rendered large in the center.
const BlogCoverArt = ({ kind, title }) => {
  // common cluster of small sketch glyphs scattered around the perimeter.
  const sketches = {
    desk: (
      <g stroke="var(--ue-deep)" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round">
        {/* monitor */}
        <rect x="14" y="22" width="44" height="32" rx="3" />
        <path d="M28 56 L44 56 M36 54 L36 60" />
        <path d="M22 28 q4 -4 10 0 t10 0" />
        {/* chat scribble */}
        <rect x="68" y="14" width="32" height="20" rx="3" />
        <path d="M76 22 h16 M76 28 h10" />
        {/* pencil */}
        <path d="M260 18 L300 50 L296 56 L256 24 Z" />
        <path d="M298 52 L304 50 L302 56 Z" fill="var(--ue-deep)" stroke="none" />
        {/* spray can */}
        <rect x="14" y="200" width="20" height="28" rx="2" />
        <rect x="17" y="194" width="14" height="8" rx="1" />
        <path d="M40 198 q8 -4 16 0 q-4 4 0 8 q-8 -4 -16 0 q4 -4 0 -8 Z" />
        {/* paint brush */}
        <path d="M268 222 L292 198 L302 208 L278 232 Z" />
        <path d="M278 232 L266 244 L262 240 L274 228 Z" fill="var(--ue-deep)" stroke="none" />
        {/* paperclip */}
        <path d="M170 14 q-8 0 -8 8 v18 q0 6 6 6 t6 -6 v-14" />
        {/* loose marks */}
        <path d="M115 25 q4 -3 8 0 t8 0" />
        <path d="M210 30 l 6 6 M216 30 l -6 6" />
        <path d="M30 165 l8 0 M34 161 l0 8" />
        <path d="M285 130 c 0 6 -6 6 -6 0 s 6 -6 6 0 z" />
      </g>
    ),
    plan: (
      <g stroke="var(--ue-deep)" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round">
        {/* clipboard */}
        <rect x="16" y="18" width="40" height="50" rx="3" />
        <path d="M28 18 v-6 h16 v6" />
        <path d="M22 30 h28 M22 38 h22 M22 46 h26 M22 54 h18" />
        {/* paper stack */}
        <rect x="248" y="14" width="44" height="56" rx="3" />
        <rect x="254" y="22" width="38" height="56" rx="3" />
        <path d="M260 36 h26 M260 44 h20 M260 52 h24" />
        {/* pen */}
        <path d="M76 234 L114 196 L120 202 L82 240 Z" />
        <path d="M76 234 L70 246 L82 240 Z" fill="var(--ue-deep)" stroke="none" />
        {/* sticky note */}
        <path d="M250 210 l34 0 l0 28 l-8 8 l-26 0 z" />
        <path d="M276 246 l0 -8 l8 0" />
        <path d="M256 220 h22 M256 226 h16" />
        {/* arrow doodle */}
        <path d="M160 234 q14 -12 28 0" />
        <path d="M185 230 l3 4 l-4 3" />
        {/* loose scribbles */}
        <path d="M120 18 q6 -4 12 0 t12 0" />
        <path d="M200 22 l 8 8 M208 22 l -8 8" />
      </g>
    ),
    ai: (
      <g stroke="var(--ue-deep)" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round">
        {/* phone */}
        <rect x="14" y="20" width="22" height="40" rx="3" />
        <circle cx="25" cy="55" r="1.5" fill="var(--ue-deep)" />
        <path d="M18 28 h14" />
        {/* person at desk */}
        <circle cx="240" cy="60" r="8" />
        <path d="M232 76 q8 -10 16 0 v18 h-16 z" />
        <path d="M248 80 l30 -6 l-2 -5 l-28 5 z" />
        {/* spray can */}
        <rect x="262" y="14" width="18" height="26" rx="2" />
        <rect x="265" y="9" width="12" height="6" rx="1" />
        <path d="M284 18 q6 -2 12 0" />
        {/* signal lines */}
        <path d="M118 22 q10 -10 20 0" />
        <path d="M122 28 q8 -6 14 0" />
        {/* pencil top-right corner */}
        <path d="M260 218 L300 180" />
        <path d="M298 182 L304 180 L302 186 Z" fill="var(--ue-deep)" stroke="none" />
        {/* loose marks */}
        <path d="M40 230 l 0 -20" />
        <path d="M30 220 h20" />
        <path d="M80 240 q8 -6 16 0" />
        <path d="M210 30 c 4 2 4 8 0 10 s -8 -2 0 -10 z" />
        <path d="M150 240 l8 0 M154 236 l0 8" />
      </g>
    ),
  };

  return (
    <svg viewBox="0 0 320 240" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }} aria-hidden="true">
      {/* base cream wash (off-white) */}
      <rect width="320" height="240" fill="var(--ue-off-white)" />
      {/* scattered sketch glyphs */}
      {sketches[kind] || sketches.desk}
      {/* Title centered as the focal point — Comfortaa-stylized */}
      <foreignObject x="40" y="50" width="240" height="140">
        <div xmlns="http://www.w3.org/1999/xhtml" style={{
          fontFamily: 'Georgia, "Times New Roman", serif', fontWeight: 700,
          fontSize: 22, lineHeight: 1.12, color: 'var(--ue-midnight)',
          textAlign: 'center', letterSpacing: '-0.005em',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          height: '100%', textWrap: 'balance',
        }}>{title}</div>
      </foreignObject>
    </svg>
  );
};

/* ============================================================ */
/*  Final CTA + Footer                                           */
/* ============================================================ */
const FinalCTA = ({ industry, ctaColor }) => (
  <section style={{ background: 'var(--ue-midnight)', padding: '80px 32px', position: 'relative', overflow: 'hidden' }}>
    <img src="assets/logo-full-stacked.png" alt="" style={{
      position: 'absolute', right: -120, bottom: -80, width: 460, opacity: 0.06, pointerEvents: 'none',
    }} />
    <div style={{ maxWidth: 1080, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
      <h2 style={{
        fontFamily: 'Comfortaa', fontWeight: 700, fontSize: 'clamp(30px, 4vw, 48px)',
        color: '#fff', margin: '0 0 18px',
        letterSpacing: '-0.02em', lineHeight: 1.1,
      }}>
        Let's build a marketing engine your {industry.toLowerCase()} <span style={{ color: 'var(--ue-sky)' }}>business deserves.</span>
      </h2>
      <p style={{ fontFamily: 'Montserrat', fontWeight: 300, fontSize: 18, lineHeight: 1.65, color: 'rgba(255,255,255,0.78)', maxWidth: 620, margin: '0 auto 30px' }}>
        Free 30-minute strategy review. We'll tell you what we'd change, what we'd keep, and what we'd build first — even if you never hire us.
      </p>
      <div style={{ display: 'inline-flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center' }}>
        <Button variant={ctaColor === 'primary' ? 'secondary' : ctaColor} size="lg" as="a" href="#lead-form">
          Get my free plan <Icon name="arrow-right" size={18} />
        </Button>
        <Button variant="inverse" size="lg" as="a" href="tel:8015551234">
          <Icon name="phone" size={16} /> (801) 555-1234
        </Button>
      </div>
    </div>
  </section>
);

const SiteFooter = () => (
  <footer style={{ background: 'var(--ue-midnight)', color: 'rgba(255,255,255,0.72)', padding: '64px 32px 32px' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div className="ue-footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr', gap: 32, marginBottom: 48 }}>
        <div>
          <img src="assets/logo-horizontal-mono-white.png" alt="Upward Engine" style={{ height: 32, marginBottom: 18 }} />
          <p style={{ fontFamily: 'Montserrat', fontWeight: 300, fontSize: 13.5, lineHeight: 1.65, color: 'rgba(255,255,255,0.62)', margin: '0 0 16px', maxWidth: 320 }}>
            ROI-first digital marketing for small and mid-size businesses. Built in Utah. Serving clients nationwide.
          </p>
          <div style={{ display: 'flex', gap: 10 }}>
            {SOCIAL_ICONS.map(({ name, path, viewBox }) => (
              <a key={name} href="#" aria-label={name} style={{
                width: 34, height: 34, borderRadius: 8,
                background: 'rgba(255,255,255,0.06)', color: 'rgba(255,255,255,0.72)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                transition: 'background 150ms cubic-bezier(.2,.8,.2,1), color 150ms cubic-bezier(.2,.8,.2,1)',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(46,168,217,0.20)'; e.currentTarget.style.color = '#fff'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; e.currentTarget.style.color = 'rgba(255,255,255,0.72)'; }}>
                <svg width="16" height="16" viewBox={viewBox || '0 0 24 24'} fill="currentColor" aria-hidden="true"><path d={path} /></svg>
              </a>
            ))}
          </div>
        </div>
        {[
          { h: 'Services', links: ['SEO','Paid Media','Web Design','Content','Email & CRM','Analytics'] },
          { h: 'Industries', links: ['Home Services','Healthcare','Legal','Financial','Manufacturing','See all →'] },
          { h: 'Company', links: ['About','Approach','Careers','Press','Contact'] },
          { h: 'Resources', links: ['Blog','Case Studies','Free Audit','ROI Calculator','Newsletter'] },
        ].map(col => (
          <div key={col.h}>
            <div style={{ fontFamily: 'Comfortaa', fontWeight: 700, fontSize: 13, color: '#fff', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 16 }}>{col.h}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {col.links.map(l => (
                <li key={l}><a href="#" style={{ fontFamily: 'Montserrat', fontSize: 13.5, color: 'rgba(255,255,255,0.66)', textDecoration: 'none' }}>{l}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.10)',
        fontFamily: 'Montserrat', fontSize: 12.5, color: 'rgba(255,255,255,0.5)', gap: 16, flexWrap: 'wrap',
      }}>
        <div>© 2026 Upward Engine. All rights reserved.</div>
        <div style={{ display: 'flex', gap: 22 }}>
          <a href="#" style={{ color: 'rgba(255,255,255,0.5)', textDecoration: 'none' }}>Privacy</a>
          <a href="#" style={{ color: 'rgba(255,255,255,0.5)', textDecoration: 'none' }}>Terms</a>
          <a href="#" style={{ color: 'rgba(255,255,255,0.5)', textDecoration: 'none' }}>Accessibility</a>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { CaseStudies, FAQs, BlogRoll, FinalCTA, SiteFooter });
