// header-hero.jsx — sticky header + hero w/ lead-capture form on the right.

const TPL = window.TPL; // template tokens — provided by landing-app.jsx

const SiteHeader = ({ industry }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const linkStyle = {
    fontFamily: 'Montserrat', fontWeight: 500, fontSize: 14, color: 'var(--ue-midnight)',
    textDecoration: 'none', padding: '8px 4px', transition: 'color 150ms cubic-bezier(.2,.8,.2,1)',
  };

  return (
    <header className="ue-header" style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: scrolled ? 'rgba(255,255,255,0.9)' : '#fff',
      backdropFilter: scrolled ? 'blur(16px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(16px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(147,163,180,0.24)' : '1px solid transparent',
      transition: 'all 250ms cubic-bezier(.2,.8,.2,1)',
    }}>
      <div className="ue-shell" style={{
        maxWidth: 1280, margin: '0 auto', height: 72,
        padding: '0 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
          <img src="assets/logo-horizontal-light.png" alt="Upward Engine" style={{ height: 34 }} />
        </a>
        <nav className="ue-nav" style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          <a href="#services" style={linkStyle}>Services</a>
          <a href="#industries" style={linkStyle}>Industries</a>
          <a href="#case-studies" style={linkStyle}>Case studies</a>
          <a href="#faqs" style={linkStyle}>FAQs</a>
          <a href="#blog" style={linkStyle}>Resources</a>
        </nav>
        <div className="ue-cta-cluster" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <a href="tel:8015551234" style={{ ...linkStyle, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <Icon name="phone" size={14} color="var(--ue-deep)" /> (801) 555-1234
          </a>
          <Button variant="primary" size="sm" as="a" href="#lead-form">Get started →</Button>
        </div>
        <button className="ue-burger" onClick={() => setMobileOpen(v => !v)} aria-label="Menu" style={{
          display: 'none', background: 'transparent', border: 0, cursor: 'pointer', padding: 8, color: 'var(--ue-midnight)',
        }}>
          <Icon name={mobileOpen ? 'x' : 'menu'} size={24} />
        </button>
      </div>
      {mobileOpen && (
        <div className="ue-mobile-menu" style={{ borderTop: '1px solid rgba(147,163,180,0.24)', padding: '12px 20px 18px', background: '#fff' }}>
          {[['Services','#services'],['Industries','#industries'],['Case studies','#case-studies'],['FAQs','#faqs'],['Resources','#blog']].map(([l,h]) => (
            <a key={h} href={h} onClick={() => setMobileOpen(false)} style={{ ...linkStyle, display: 'block', padding: '10px 4px', borderBottom: '1px solid rgba(147,163,180,0.16)' }}>{l}</a>
          ))}
          <Button variant="primary" size="md" as="a" href="#lead-form" style={{ marginTop: 14, width: '100%', justifyContent: 'center' }} onClick={() => setMobileOpen(false)}>Get started →</Button>
        </div>
      )}
    </header>
  );
};

/* -------------------------------------------------------------- */
/*  Hero                                                          */
/* -------------------------------------------------------------- */

const Hero = ({ industry, companyType, locality, ctaColor }) => {
  const [form, setForm] = React.useState({
    firstName: '', lastName: '', mobile: '', email: '', help: '',
  });
  const [sent, setSent] = React.useState(false);
  const change = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <section id="top" style={{
      position: 'relative', overflow: 'hidden',
      background: 'var(--ue-midnight) url("assets/hero-bg.webp") center / cover no-repeat',
    }}>
      {/* Subtle midnight wash to make sure copy on the left side stays legible over any image variation */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(90deg, rgba(21,22,65,0.78) 0%, rgba(21,22,65,0.50) 45%, rgba(21,22,65,0.20) 100%)',
        pointerEvents: 'none',
      }} />

      <div className="ue-hero-grid" style={{
        position: 'relative', maxWidth: 1280, margin: '0 auto',
        padding: '128px 32px 144px',
        display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 64, alignItems: 'center',
      }}>
        {/* Left: headline + intro */}
        <div>
          <h1 style={{
            fontFamily: 'Comfortaa', fontWeight: 700, fontSize: 'clamp(40px, 5.4vw, 64px)', lineHeight: 1.04,
            letterSpacing: '-0.02em', color: 'var(--ue-white)', margin: '0 0 22px',
          }}>
            Digital marketing<br />for <span style={{ color: 'var(--ue-sky)' }}>{industry}.</span>
          </h1>
          <p style={{
            fontFamily: 'Montserrat', fontWeight: 300, fontSize: 19, lineHeight: 1.65,
            color: 'rgba(255,255,255,0.85)', maxWidth: '54ch', margin: '0 0 14px',
          }}>
            We help {industry.toLowerCase()} companies turn marketing into a measurable line on the P&L. Strategy, SEO, paid ads, websites, and content — built for the way {companyType.toLowerCase()} owners actually run their business.
          </p>
          <p style={{
            fontFamily: 'Montserrat', fontWeight: 300, fontSize: 19, lineHeight: 1.65,
            color: 'rgba(255,255,255,0.85)', maxWidth: '54ch', margin: '0 0 32px',
          }}>
            No vanity metrics. No surprise invoices. Just qualified leads showing up on your calendar.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 22, alignItems: 'center', marginTop: 8 }}>
            <TrustChip icon="star" label="4.9 / 5" sub="200+ client reviews" />
            <div style={{ width: 1, height: 32, background: 'rgba(255,255,255,0.20)' }} />
            <TrustChip icon="shield-check" label="No long-term contracts" sub="Month-to-month engagements" />
          </div>
        </div>

        {/* Right: lead form — Deep Blue leaf panel (matches upwardengine.com/contact) */}
        <div id="lead-form" style={{
          position: 'relative',
          background: 'var(--ue-deep)',
          borderRadius: '8px 8px 180px 8px',
          padding: '36px 32px 40px',
          boxShadow: '0 16px 32px rgba(21, 22, 65, 0.18)',
        }}>
          <form onSubmit={submit} style={{
            display: 'flex', flexDirection: 'column', gap: 18,
          }}>
            {sent ? (
              <div style={{ padding: '20px 4px', textAlign: 'center' }}>
                <div style={{ width: 56, height: 56, borderRadius: 999, background: 'rgba(43,163,122,0.18)', color: 'var(--status-success)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '8px auto 16px' }}>
                  <Icon name="check" size={28} color="var(--status-success)" />
                </div>
                <h3 style={{ fontFamily: 'Comfortaa', fontWeight: 700, fontSize: 22, color: 'var(--ue-white)', margin: '0 0 8px' }}>You're in.</h3>
                <p style={{ fontFamily: 'Montserrat', fontWeight: 300, fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.72)', margin: '0 0 18px' }}>
                  We'll review your {industry.toLowerCase()} {companyType.toLowerCase()} and reply within one business day with next steps.
                </p>
                <button type="button" onClick={() => { setSent(false); setForm({ firstName: '', lastName: '', mobile: '', email: '', help: '' }); }}
                  style={{
                    background: 'transparent', border: 0, cursor: 'pointer',
                    color: 'var(--ue-white)', fontFamily: 'Montserrat', fontSize: 14, fontWeight: 600, textDecoration: 'underline',
                  }}>Submit another →</button>
              </div>
            ) : (
              <React.Fragment>
                <div className="ue-form-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                  <Field theme="dark" label="First name" name="firstName" value={form.firstName} onChange={change('firstName')} required />
                  <Field theme="dark" label="Last name"  name="lastName"  value={form.lastName}  onChange={change('lastName')}  required />
                </div>
                <Field theme="dark" label="Mobile number"  name="mobile" type="tel"   value={form.mobile} onChange={change('mobile')} required />
                <Field theme="dark" label="Email address"  name="email"  type="email" value={form.email}  onChange={change('email')}  required />
                <Field theme="dark" label="What help do you need?" name="help" type="textarea" value={form.help} onChange={change('help')} required />
                <div>
                  <button type="submit" style={{
                    background: 'var(--ue-ember)', color: 'var(--ue-white)',
                    fontFamily: 'Montserrat', fontWeight: 600, fontSize: 15,
                    padding: '14px 30px', border: 0, borderRadius: 4, cursor: 'pointer',
                    marginTop: 8,
                    transition: 'filter 150ms cubic-bezier(.2,.8,.2,1)',
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.filter = 'brightness(0.92)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.filter = 'none'; }}
                  >Submit</button>
                </div>
              </React.Fragment>
            )}
          </form>
        </div>
      </div>
    </section>
  );
};

const TrustChip = ({ icon, label, sub }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
    <div style={{
      width: 36, height: 36, borderRadius: 8,
      background: 'rgba(255,255,255,0.12)', color: 'var(--ue-sky)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
    }}>
      <Icon name={icon} size={18} />
    </div>
    <div style={{ fontFamily: 'Montserrat', fontSize: 13, lineHeight: 1.3 }}>
      <div style={{ fontWeight: 600, color: 'var(--ue-white)' }}>{label}</div>
      <div style={{ color: 'rgba(255,255,255,0.72)', fontSize: 11.5 }}>{sub}</div>
    </div>
  </div>
);

Object.assign(window, { SiteHeader, Hero });