// Two hero variants

// Nav — logo left, links + phone right, hamburger on mobile
const Nav = () => {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => {
      document.body.style.overflow = '';
    };
  }, [open]);
  const linkStyle = {
    textDecoration: 'none',
    color: 'var(--ink-soft)',
    fontSize: 14,
    fontWeight: 500,
  };
  const mobileLinkStyle = {
    textDecoration: 'none',
    color: 'var(--ink)',
    fontFamily: 'var(--f-display)',
    fontSize: 26,
    fontWeight: 500,
    padding: '14px 0',
    borderBottom: '1px solid var(--rule)',
    display: 'block',
  };

  return (
    <>
      <div
        className='container'
        style={{
          paddingTop: 26,
          paddingBottom: 18,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          position: 'relative',
          zIndex: 3,
          gap: 24,
        }}
      >
        <a
          href='/'
          style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}
        >
          <img
            src='uploads/longhornminerals.png'
            alt='Longhorn Minerals'
            style={{ height: 52, width: 'auto', display: 'block', mixBlendMode: 'multiply' }}
          />
        </a>
        <div className='nav-links-main' style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          <a href='#how' style={linkStyle}>
            How it works
          </a>
          {/* <a href='#team' style={linkStyle}>
            Meet Jake
          </a> */}
          <a href='#faq' style={linkStyle}>
            FAQ
          </a>
          {/* <a href='#guide' style={linkStyle}>
            Free guide
          </a> */}
          <a
            href='tel:+13612106843'
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 8,
              textDecoration: 'none',
              color: 'var(--ink)',
              fontFamily: 'var(--f-display)',
              fontSize: 18,
              fontWeight: 500,
              whiteSpace: 'nowrap',
              borderBottom: '1.5px solid var(--terra)',
              paddingBottom: 2,
            }}
          >
            <span style={{ fontSize: 14 }}>📞</span>
            <span>(361) 210-6843</span>
          </a>
        </div>

        {/* Mobile: phone + hamburger */}
        <div
          className='nav-mobile-actions'
          style={{ display: 'none', alignItems: 'center', gap: 14 }}
        >
          <a
            href='tel:+13612106843'
            aria-label='Call us'
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              justifyContent: 'center',
              width: 42,
              height: 42,
              borderRadius: '50%',
              background: 'var(--ink)',
              textDecoration: 'none',
            }}
          >
            <svg
              width='18'
              height='18'
              viewBox='0 0 24 24'
              fill='none'
              stroke='white'
              strokeWidth='2'
              strokeLinecap='round'
              strokeLinejoin='round'
            >
              <path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z' />
            </svg>
          </a>
          <button
            onClick={() => setOpen(true)}
            aria-label='Open menu'
            style={{
              width: 44,
              height: 44,
              background: 'transparent',
              border: '1.5px solid var(--ink)',
              borderRadius: 2,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              padding: 0,
              cursor: 'pointer',
            }}
          >
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <span style={{ width: 20, height: 2, background: 'var(--ink)' }}></span>
              <span style={{ width: 20, height: 2, background: 'var(--ink)' }}></span>
              <span style={{ width: 20, height: 2, background: 'var(--ink)' }}></span>
            </div>
          </button>
        </div>
      </div>

      {/* Mobile drawer */}
      {open && (
        <div
          onClick={() => setOpen(false)}
          style={{
            position: 'fixed',
            inset: 0,
            zIndex: 1000,
            background: 'rgba(58,46,36,0.5)',
            animation: 'fadein 0.2s ease',
          }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              position: 'absolute',
              top: 0,
              right: 0,
              bottom: 0,
              width: 'min(88vw, 380px)',
              background: 'var(--paper)',
              padding: '26px 28px 36px',
              display: 'flex',
              flexDirection: 'column',
              boxShadow: '-10px 0 40px rgba(0,0,0,0.2)',
              animation: 'slidein 0.25s ease',
            }}
          >
            <div
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                marginBottom: 18,
              }}
            >
              <img
                src='uploads/longhornminerals.png'
                alt='Longhorn Minerals'
                style={{ height: 44, width: 'auto', mixBlendMode: 'multiply' }}
              />
              <button
                onClick={() => setOpen(false)}
                aria-label='Close menu'
                style={{
                  width: 40,
                  height: 40,
                  background: 'transparent',
                  border: 'none',
                  fontSize: 28,
                  color: 'var(--ink)',
                  cursor: 'pointer',
                  padding: 0,
                  fontFamily: 'var(--f-display)',
                  lineHeight: 1,
                }}
              >
                ×
              </button>
            </div>

            <div style={{ borderTop: '1px solid var(--rule)', marginBottom: 4 }}></div>
            <a href='#how' onClick={() => setOpen(false)} style={mobileLinkStyle}>
              How it works
            </a>
            {/* <a href='#team' onClick={() => setOpen(false)} style={mobileLinkStyle}>
              Meet Jake
            </a> */}
            <a href='#faq' onClick={() => setOpen(false)} style={mobileLinkStyle}>
              FAQ
            </a>
            {/* <a href='#guide' onClick={() => setOpen(false)} style={mobileLinkStyle}>
              Free guide
            </a> */}
            <a href='#cta' onClick={() => setOpen(false)} style={mobileLinkStyle}>
              Free valuation
            </a>

            <div style={{ marginTop: 'auto', paddingTop: 32 }}>
              {/* <div className='smallcaps' style={{ color: 'var(--ink-mute)', marginBottom: 10 }}>
                Talk to Jake
              </div> */}
              <a
                href='tel:+13612106843'
                style={{
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 10,
                  textDecoration: 'none',
                  color: 'var(--ink)',
                  fontFamily: 'var(--f-display)',
                  fontSize: 24,
                  fontWeight: 500,
                  borderBottom: '2px solid var(--terra)',
                  paddingBottom: 3,
                }}
              >
                <span style={{ fontSize: 20 }}>📞</span>
                <span>(361) 210-6843</span>
              </a>
              <div
                style={{
                  fontSize: 13,
                  color: 'var(--ink-mute)',
                  marginTop: 10,
                  fontFamily: 'var(--f-serif)',
                  fontStyle: 'italic',
                }}
              >
                {/* Mon–Fri, 8a–6p CT */}
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

// HERO A — landscape-forward, editorial. Large land illustration on right, form in a "card" that overlaps.
const HeroA = () => {
  return (
    <section style={{ position: 'relative', paddingTop: 20, paddingBottom: 80 }}>
      {/* topographic decoration */}
      <div style={{ position: 'absolute', right: -40, top: 0, zIndex: 0, opacity: 0.6 }}>
        <TopoLines w={760} h={220} opacity={0.35} />
      </div>

      <div className='container' style={{ position: 'relative', zIndex: 2 }}>
        <div
          className='hero-grid'
          style={{
            display: 'grid',
            gridTemplateColumns: '1.05fr 0.95fr',
            gap: 60,
            alignItems: 'start',
            paddingTop: 40,
          }}
        >
          {/* LEFT — headline */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 26 }}>
              <span className='smallcaps' style={{ color: 'var(--sage-dark)' }}>
                We buy Nationwide
              </span>
              <div style={{ flex: 1, height: 1, background: 'var(--rule)' }}></div>
            </div>

            <h1
              className='display'
              style={{
                fontSize: 'clamp(44px, 5.4vw, 76px)',
                lineHeight: 1.02,
                margin: '0 0 24px',
                letterSpacing: '-0.015em',
                fontWeight: 500,
              }}
            >
              Find out what your mineral rights are{' '}
              <span
                style={{
                  background:
                    'linear-gradient(180deg, transparent 62%, rgba(201,136,98,0.38) 62%, rgba(201,136,98,0.38) 94%, transparent 94%)',
                  padding: '0 4px',
                  boxDecorationBreak: 'clone',
                  WebkitBoxDecorationBreak: 'clone',
                }}
              >
                actually worth
              </span>
            </h1>

            <p
              style={{
                fontSize: 20,
                lineHeight: 1.5,
                color: 'var(--ink-soft)',
                maxWidth: 540,
                margin: '0 0 28px',
                fontFamily: 'var(--f-serif)',
              }}
            >
              If you own or inherited mineral rights, it's important to know what they're worth —
              and we'll tell you, free of charge. No pressure.
            </p>

            {/* <div
              style={{
                display: 'flex',
                gap: 28,
                alignItems: 'center',
                marginBottom: 36,
                flexWrap: 'wrap',
              }}
            > */}
            {/* <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <CheckMark />
                <span style={{ fontSize: 15, color: 'var(--ink-soft)' }}>
                  Free — no cost to you
                </span>
              </div> */}
            {/* <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <CheckMark />
                <span style={{ fontSize: 15, color: 'var(--ink-soft)' }}>BBB A+ accredited</span>
              </div>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <CheckMark />
                <span style={{ fontSize: 15, color: 'var(--ink-soft)' }}>
                  Plain English — no pressure
                </span>
              </div> */}
            {/* </div> */}

            <div
              style={{
                background: 'rgba(255,253,248,0.65)',
                border: '1px solid rgba(58,46,36,0.18)',
                padding: '34px 26px 22px',
                position: 'relative',
              }}
            >
              <div
                style={{
                  position: 'absolute',
                  top: -10,
                  left: 22,
                  background: 'var(--paper)',
                  padding: '0 10px',
                }}
              >
                <span className='smallcaps' style={{ color: 'var(--terra-dark)' }}>
                  Get your free valuation
                </span>
              </div>
              <LeadForm layout='stacked' compact={true} />
            </div>
          </div>

          {/* RIGHT — land panel */}
          <div className='hero-art-col' style={{ position: 'relative', paddingTop: 30 }}>
            <LandPanel />
          </div>
        </div>
      </div>
    </section>
  );
};

// HERO B — "letter from the owner" — more personal / first-person feel
const HeroB = () => {
  return (
    <section style={{ position: 'relative', paddingTop: 30, paddingBottom: 90 }}>
      <div className='container' style={{ position: 'relative' }}>
        <div
          className='hero-grid'
          style={{
            display: 'grid',
            gridTemplateColumns: '0.9fr 1.1fr',
            gap: 70,
            alignItems: 'start',
            paddingTop: 30,
          }}
        >
          {/* LEFT — founder portrait + "from the desk of" */}
          <div style={{ position: 'relative' }}>
            <div style={{ position: 'relative' }}>
              <PhotoPlaceholder
                label='founder portrait · Jake Callahan on the ranch'
                ratio='4/5'
                tone='warm'
              />
              {/* sage postage-stamp style corner */}
              <div
                style={{
                  position: 'absolute',
                  top: -14,
                  right: -14,
                  background: 'var(--paper)',
                  border: '1px dashed var(--sage-dark)',
                  padding: '8px 12px',
                  fontFamily: 'var(--f-body)',
                  fontSize: 10,
                  letterSpacing: '0.18em',
                  textTransform: 'uppercase',
                  color: 'var(--sage-dark)',
                  transform: 'rotate(4deg)',
                }}
              >
                Est. 1978 · Family owned
              </div>
            </div>

            <div style={{ marginTop: 22, display: 'flex', gap: 18, alignItems: 'flex-start' }}>
              <div style={{ flex: 1 }}>
                <div className='smallcaps' style={{ color: 'var(--terra-dark)', marginBottom: 6 }}>
                  A note from
                </div>
                <div
                  style={{
                    fontFamily: 'var(--f-display)',
                    fontSize: 22,
                    lineHeight: 1.2,
                    fontWeight: 500,
                  }}
                >
                  Jake Callahan
                </div>
                <div style={{ fontSize: 13, color: 'var(--ink-mute)', marginTop: 2 }}>
                  Third‑generation owner · Fredericksburg, TX
                </div>
              </div>
              <div
                className='hand-accent'
                style={{
                  fontFamily: 'var(--f-hand)',
                  fontSize: 38,
                  color: 'var(--terra-dark)',
                  lineHeight: 1,
                  paddingTop: 6,
                  transform: 'rotate(-6deg)',
                }}
              >
                Jake
              </div>
            </div>
          </div>

          {/* RIGHT — the letter */}
          <div style={{ position: 'relative' }}>
            <div className='smallcaps' style={{ color: 'var(--sage-dark)', marginBottom: 16 }}>
              Free Valuation · No Obligation
            </div>

            <h1
              className='display'
              style={{
                fontSize: 'clamp(40px, 4.6vw, 64px)',
                lineHeight: 1.05,
                margin: '0 0 28px',
                letterSpacing: '-0.01em',
                fontWeight: 500,
              }}
            >
              If you've inherited mineral rights,
              <br />
              <span className='serif-italic' style={{ fontWeight: 500 }}>
                you deserve a straight answer.
              </span>
            </h1>

            <div
              style={{
                fontSize: 18,
                lineHeight: 1.65,
                color: 'var(--ink)',
                maxWidth: 560,
                fontFamily: 'var(--f-serif)',
                fontWeight: 500,
              }}
            >
              <p style={{ margin: '0 0 16px' }}>
                Most people who call us don't know what they have or what it's worth. That's
                completely normal — and it's exactly what we're here to help with.
              </p>
              <p style={{ margin: '0 0 16px' }}>
                I'm a Texas-based independent buyer. I work with a team of experienced landmen and
                mineral rights attorneys. Send me your information and I'll give you a plain, honest
                answer about what your rights are worth — no obligation, no runaround.
              </p>
            </div>

            {/* inline form */}
            <div
              style={{
                marginTop: 28,
                borderTop: '1px solid var(--rule)',
                borderBottom: '1px solid var(--rule)',
                padding: '26px 0',
                position: 'relative',
              }}
            >
              <LeadForm layout='stacked' compact={true} />
            </div>

            <div style={{ display: 'flex', gap: 26, marginTop: 22, flexWrap: 'wrap' }}>
              <TrustBadge label='BBB A+ Accredited' sub='Since 2012' />
              <TrustBadge label='NARO Member' sub="Nat'l Assoc. Royalty Owners" />
              <TrustBadge label='3 Generations' sub='Family owned since 1978' />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// Land panel — stock photo of Texas ranch at golden hour with overlay labels
const LandPanel = () => (
  <div
    style={{
      position: 'relative',
      aspectRatio: '4/5',
      background: 'var(--paper-warm)',
      border: '1px solid rgba(58,46,36,0.15)',
      overflow: 'hidden',
    }}
  >
    {/* stock photo — two riders working cattle on the open range */}
    <img
      src='uploads/colton-sturgeon-f7ADPPOG_EQ-unsplash.jpg'
      alt='Texas ranch landscape'
      style={{
        position: 'absolute',
        inset: 0,
        width: '100%',
        height: '100%',
        objectFit: 'cover',
        objectPosition: 'right 30%',
      }}
    />
    {/* warm tint wash to keep it on-brand */}
    <div
      style={{
        position: 'absolute',
        inset: 0,
        background:
          'linear-gradient(180deg, rgba(232,176,122,0.18) 0%, rgba(201,136,98,0.08) 40%, rgba(58,46,36,0.15) 100%)',
        mixBlendMode: 'multiply',
      }}
    ></div>
    {/* top + bottom darken for legibility of overlay text */}
    <div
      style={{
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        height: 120,
        background: 'linear-gradient(180deg, rgba(58,46,36,0.35) 0%, transparent 100%)',
      }}
    ></div>
    <div
      style={{
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        height: 160,
        background: 'linear-gradient(0deg, rgba(58,46,36,0.75) 0%, transparent 100%)',
      }}
    ></div>

    {/* hidden — kept for dom stability but not rendered */}
    <svg width='0' height='0' viewBox='0 0 400 500' style={{ display: 'none' }}>
      {/* far mountains */}
      <path
        d='M0 330 L 60 280 L 100 310 L 160 260 L 230 320 L 300 270 L 360 310 L 400 290 L 400 340 L 0 340 Z'
        fill='#9B8A6E'
        opacity='0.7'
      />
      {/* mid hills */}
      <path
        d='M0 340 C 60 320, 100 330, 150 335 S 260 360, 320 345 S 400 340, 400 350 L 400 380 L 0 380 Z'
        fill='#7A8968'
      />
      {/* front field */}
      <path
        d='M0 360 C 80 355, 140 372, 220 370 S 340 380, 400 372 L 400 500 L 0 500 Z'
        fill='#5D6B4F'
      />
      {/* fence posts */}
      {[60, 110, 160, 210, 260, 310, 360].map((x, i) => (
        <g key={i}>
          <rect x={x - 1.5} y={360} width='3' height='22' fill='#3A2E24' opacity='0.55' />
        </g>
      ))}
      {/* barbed wire */}
      <line x1='0' y1='368' x2='400' y2='368' stroke='#3A2E24' strokeWidth='0.7' opacity='0.4' />
      <line x1='0' y1='374' x2='400' y2='374' stroke='#3A2E24' strokeWidth='0.7' opacity='0.4' />
      {/* lone tree */}
      <g transform='translate(80 340)'>
        <rect x='-2' y='-4' width='4' height='22' fill='#3A2E24' opacity='0.8' />
        <ellipse cx='0' cy='-14' rx='14' ry='14' fill='#5D6B4F' />
      </g>
      {/* small pumpjack silhouette */}
      <g transform='translate(300 322)' opacity='0.85'>
        <rect x='-8' y='6' width='16' height='10' fill='#3A2E24' />
        <line x1='0' y1='6' x2='0' y2='-2' stroke='#3A2E24' strokeWidth='2' />
        <line x1='-12' y1='-4' x2='14' y2='0' stroke='#3A2E24' strokeWidth='2' />
        <circle cx='14' cy='0' r='2' fill='#3A2E24' />
      </g>
    </svg>

    {/* overlay label */}
    <div
      style={{
        position: 'absolute',
        left: 18,
        top: 18,
        right: 18,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        gap: 16,
      }}
    >
      {/* <div style={{ minWidth: 0 }}>
        <div className='smallcaps' style={{ color: 'rgba(244,239,230,0.9)' }}>
          Sec. 17 · Block 23
        </div>
        <div
          style={{
            fontFamily: 'var(--f-serif)',
            fontSize: 14,
            fontStyle: 'italic',
            color: 'rgba(244,239,230,0.9)',
            marginTop: 2,
          }}
        >
          Reeves County, TX
        </div>
      </div> */}
      <div
        style={{
          fontFamily: 'ui-monospace, Menlo, monospace',
          fontSize: 9,
          letterSpacing: '0.1em',
          color: 'rgba(244,239,230,0.75)',
          textAlign: 'right',
          flexShrink: 0,
          whiteSpace: 'nowrap',
        }}
      >
        {/* 31.4°N
          <br />
          103.5°W */}
      </div>
    </div>

    {/* <div
      style={{
        position: 'absolute',
        left: 18,
        bottom: 16,
        right: 18,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'flex-end',
        color: 'var(--paper)',
      }}
    >
      <div>
        <div
          style={{ fontFamily: 'var(--f-display)', fontSize: 22, fontWeight: 500, lineHeight: 1 }}
        >
          Last closing
        </div>
        <div style={{ fontSize: 13, opacity: 0.85, marginTop: 4 }}>
          March 2026 · 320 net mineral acres
        </div>
      </div>
      <div style={{ fontFamily: 'var(--f-display)', fontSize: 34, fontWeight: 500, lineHeight: 1 }}>
        <span className='num'>$1.24M</span>
      </div>
    </div> */}
  </div>
);

const CheckMark = () => (
  <svg width='18' height='18' viewBox='0 0 18 18' fill='none'>
    <circle cx='9' cy='9' r='8' fill='none' stroke='var(--sage-dark)' strokeWidth='1.3' />
    <path
      d='M5 9.2 L 8 12 L 13 6.5'
      stroke='var(--sage-dark)'
      strokeWidth='1.6'
      fill='none'
      strokeLinecap='round'
      strokeLinejoin='round'
    />
  </svg>
);

const TrustBadge = ({ label, sub }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <div
      style={{
        width: 42,
        height: 42,
        borderRadius: '50%',
        border: '1.5px solid var(--ink-soft)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontFamily: 'var(--f-display)',
        fontSize: 15,
        fontWeight: 600,
        color: 'var(--ink-soft)',
      }}
    >
      ✓
    </div>
    <div>
      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{label}</div>
      <div style={{ fontSize: 11, color: 'var(--ink-mute)', marginTop: 1 }}>{sub}</div>
    </div>
  </div>
);

Object.assign(window, { Nav, HeroA, HeroB, CheckMark, TrustBadge });