// Sections

const { useEffect: useEffect2, useRef: useRef2, useState: useState2 } = React;

/* ----------  NAV  ---------- */
function Nav() {
  const [scrolled, setScrolled] = useState2(false);
  const [open, setOpen] = useState2(false);
  useEffect2(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect2(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const goTo = (e, id) => {
    e.preventDefault();
    setOpen(false);
    // Defer scroll to allow menu close + body overflow reset
    setTimeout(() => {
      const el = document.getElementById(id);
      if (el) {
        const navH = 64;
        const top = el.getBoundingClientRect().top + window.pageYOffset - navH;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    }, 60);
  };

  const linkStyle = {
    fontFamily: 'var(--sans)',
    fontSize: 13,
    color: 'var(--ink-2)',
    letterSpacing: '0.02em',
    padding: '6px 0',
    position: 'relative',
  };

  return (
    <nav style={{
      position: 'fixed',
      top: 0, left: 0, right: 0,
      zIndex: 100,
      padding: scrolled || open ? '14px 0' : '22px 0',
      background: scrolled || open ? 'rgba(10, 15, 26, 0.82)' : 'transparent',
      backdropFilter: scrolled || open ? 'blur(14px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled || open ? 'blur(14px) saturate(140%)' : 'none',
      borderBottom: scrolled || open ? '1px solid var(--rule)' : '1px solid transparent',
      transition: 'all 300ms ease',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'baseline', gap: 10, minWidth: 0 }} onClick={() => setOpen(false)}>
          <span style={{
            fontFamily: 'var(--serif)',
            fontWeight: 500,
            fontSize: 20,
            letterSpacing: '-0.01em',
            whiteSpace: 'nowrap',
          }}>Alex Farris</span>
          <span className="nav-tag" style={{
            fontFamily: 'var(--mono)',
            fontSize: 10,
            letterSpacing: '0.14em',
            color: 'var(--mute)',
            textTransform: 'uppercase',
            whiteSpace: 'nowrap',
          }}>/ Fractional Ops</span>
        </a>

        <div style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
          <div style={{ display: 'flex', gap: 28 }} className="nav-links">
            {window.NAV.map(item => (
              <a key={item.id} href={`#${item.id}`} style={linkStyle}
                 onClick={(e) => goTo(e, item.id)}
                 onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent)'}
                 onMouseLeave={(e) => e.currentTarget.style.color = 'var(--ink-2)'}>
                {item.label}
              </a>
            ))}
          </div>
          <PrimaryBtn href="#contact" className="nav-cta" onClick={(e) => goTo(e, 'contact')} style={{ padding: '10px 18px', fontSize: 13 }}>
            Let’s talk <ArrowRight size={12} />
          </PrimaryBtn>
          <button
            type="button"
            className="nav-burger"
            aria-label={open ? 'Close menu' : 'Open menu'}
            aria-expanded={open}
            onClick={() => setOpen(o => !o)}
            style={{
              display: 'none',
              width: 44, height: 44,
              alignItems: 'center', justifyContent: 'center',
              border: '1px solid var(--rule-2)',
              borderRadius: 4,
              color: 'var(--ink)',
              background: 'rgba(255,255,255,0.04)',
              cursor: 'pointer',
              touchAction: 'manipulation',
              WebkitTapHighlightColor: 'transparent',
              WebkitAppearance: 'none',
              appearance: 'none',
            }}
          >
            <span style={{ position: 'relative', width: 18, height: 12, display: 'inline-block', pointerEvents: 'none' }}>
              <span style={{
                position: 'absolute', left: 0, right: 0, height: 1.5, background: 'currentColor',
                top: open ? 5 : 0,
                transform: open ? 'rotate(45deg)' : 'none',
                transition: 'all 220ms ease',
                pointerEvents: 'none',
              }}></span>
              <span style={{
                position: 'absolute', left: 0, right: 0, height: 1.5, background: 'currentColor',
                top: 5,
                opacity: open ? 0 : 1,
                transition: 'opacity 160ms ease',
                pointerEvents: 'none',
              }}></span>
              <span style={{
                position: 'absolute', left: 0, right: 0, height: 1.5, background: 'currentColor',
                top: open ? 5 : 10,
                transform: open ? 'rotate(-45deg)' : 'none',
                transition: 'all 220ms ease',
                pointerEvents: 'none',
              }}></span>
            </span>
          </button>
        </div>
      </div>

      {/* Mobile dropdown menu */}
      <div className="nav-menu" style={{
        overflow: 'hidden',
        maxHeight: open ? 480 : 0,
        opacity: open ? 1 : 0,
        transition: 'max-height 320ms cubic-bezier(.2,.7,.2,1), opacity 220ms ease',
        display: 'none',
      }}>
        <div className="container" style={{
          display: 'flex', flexDirection: 'column',
          paddingTop: 18, paddingBottom: 22,
          borderTop: '1px solid var(--rule)',
          marginTop: 14,
        }}>
          {window.NAV.map((item, i) => (
            <a
              key={item.id}
              href={`#${item.id}`}
              onClick={(e) => goTo(e, item.id)}
              style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '14px 0',
                borderBottom: '1px solid var(--rule)',
                fontFamily: 'var(--serif)',
                fontWeight: 400,
                fontSize: 22,
                letterSpacing: '-0.01em',
                color: 'var(--ink)',
                WebkitTapHighlightColor: 'transparent',
              }}
            >
              <span>{item.label}</span>
              <span style={{
                fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--mute)',
                letterSpacing: '0.14em',
              }}>{String(i + 1).padStart(2, '0')}</span>
            </a>
          ))}
          <a
            href="#contact"
            onClick={(e) => goTo(e, 'contact')}
            style={{
              marginTop: 18,
              padding: '14px 18px',
              background: 'var(--accent)',
              color: 'var(--bg)',
              fontFamily: 'var(--sans)',
              fontSize: 13,
              fontWeight: 500,
              letterSpacing: '0.02em',
              textAlign: 'center',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              WebkitTapHighlightColor: 'transparent',
            }}
          >
            Let’s talk <ArrowRight size={12} />
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 760px) {
          .nav-links { display: none !important; }
          .nav-cta { display: none !important; }
          .nav-burger { display: inline-flex !important; }
          .nav-menu { display: block !important; }
        }
        @media (max-width: 540px) {
          .nav-tag { display: none !important; }
        }
      `}</style>
    </nav>
  );
}

/* ----------  HERO  ---------- */
function Hero() {
  return (
    <header id="top" style={{
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      position: 'relative',
      paddingTop: 120,
      paddingBottom: 64,
    }}>
      <div className="container">

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.6fr 1fr',
          gap: 80,
          alignItems: 'center',
        }} className="hero-grid">

          {/* LEFT: headline column */}
          <div>
            {/* Eyebrow label */}
            <Reveal>
              <div className="hero-eyebrow" style={{
                display: 'flex', alignItems: 'center', gap: 14,
                fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--mute)',
                letterSpacing: '0.2em', textTransform: 'uppercase',
                marginBottom: 40,
              }}>
                <span style={{ width: 24, height: 1, background: 'var(--accent)' }}></span>
                <span>Fractional Operations Lead</span>
              </div>
            </Reveal>

            <Reveal delay={80}>
              <h1 className="hero-headline" style={{
                fontFamily: 'var(--serif)',
                fontWeight: 300,
                fontSize: 'clamp(32px, 4.4vw, 68px)',
                lineHeight: 1.08,
                letterSpacing: '-0.025em',
                margin: 0,
                textWrap: 'balance',
                maxWidth: '16ch',
                fontVariationSettings: '"opsz" 96',
              }}>
                I build the execution infrastructure that{' '}
                <span className="serif-italic" style={{ fontWeight: 500 }}>
                  health, wellness, and technology
                </span>{' '}
                companies need to scale.
              </h1>
            </Reveal>

            <Reveal delay={200}>
              <p className="hero-desc" style={{
                marginTop: 32,
                maxWidth: 520,
                fontSize: 17,
                lineHeight: 1.6,
                color: 'var(--ink-2)',
              }}>
                I work with growing teams to build the systems, lead the high impact initiatives, and turn strategy into consistent execution.
              </p>
            </Reveal>

            <Reveal delay={300}>
              <div className="hero-ctas" style={{
                marginTop: 40,
                display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap',
              }}>
                <PrimaryBtn href="https://calendly.com/alexfarris9/25min" target="_blank" rel="noopener noreferrer">Book a conversation <ArrowRight /></PrimaryBtn>
                <TextLink href="#services">See what I do <ArrowDown /></TextLink>
              </div>
            </Reveal>

            {/* Bottom meta strip */}
            <Reveal delay={380}>
              <div className="hero-meta hero-meta-wrap" style={{
                marginTop: 64,
                paddingTop: 24,
                borderTop: '1px solid var(--rule)',
                display: 'grid',
                gridTemplateColumns: 'repeat(3, 1fr)',
                gap: 24,
                maxWidth: 560,
              }}>
                <MetaBlock label="Available" value="Q2 2026" accent />
                <MetaBlock label="Based" value="Los Angeles" />
                <MetaBlock label="Focus" value="Health · Wellness · Tech" />
              </div>
            </Reveal>
          </div>

          {/* RIGHT: portrait */}
          <Reveal delay={260}>
            <div className="portrait-card" style={{
              position: 'relative',
              aspectRatio: '4 / 5',
              maxWidth: 380,
              marginLeft: 'auto',
              border: '1px solid var(--rule-2)',
              padding: 10,
              background: 'var(--bg-raise)',
            }}>
              <div style={{
                width: '100%', height: '100%',
                background: `url('assets/alex.png') center/cover no-repeat`,
                filter: 'grayscale(0.2) contrast(1.02) brightness(0.95)',
              }}></div>
            </div>
          </Reveal>
        </div>
      </div>

      <style>{`
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
        @media (max-width: 900px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .portrait-card { max-width: 280px !important; margin-left: 0 !important; }
        }
        @media (max-width: 560px) {
          header#top { min-height: 0 !important; padding-top: 92px !important; padding-bottom: 48px !important; }
          .hero-grid { gap: 24px !important; }
          .hero-headline { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
          .hero-meta-wrap { margin-top: 32px !important; padding-top: 20px !important; }
          .portrait-card { max-width: 220px !important; margin-left: auto !important; margin-right: auto !important; }
          .hero-meta { grid-template-columns: 1fr !important; gap: 0 !important; }
          .hero-meta .meta-block {
            display: flex !important;
            align-items: baseline !important;
            justify-content: space-between !important;
            gap: 16px !important;
            padding: 12px 0 !important;
            border-bottom: 1px solid var(--rule) !important;
          }
          .hero-meta .meta-block:last-child { border-bottom: 0 !important; }
          .hero-meta .meta-block > div:first-child { margin-bottom: 0 !important; }
          .hero-meta .meta-value {
            font-size: 15px !important;
            text-align: right !important;
          }
        }
      `}</style>
    </header>
  );
}

function MetaBlock({ label, value, accent }) {
  return (
    <div className="meta-block">
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--mute)',
        letterSpacing: '0.16em', textTransform: 'uppercase',
        marginBottom: 8,
      }}>
        {accent && (
          <span style={{
            width: 6, height: 6, borderRadius: 999,
            background: '#7ec896',
            boxShadow: '0 0 10px #7ec896',
            animation: 'pulse 2s ease-in-out infinite',
          }}></span>
        )}
        {label}
      </div>
      <div className="meta-value" style={{
        fontFamily: 'var(--serif)', fontSize: 17, color: 'var(--ink)',
        letterSpacing: '-0.01em',
      }}>
        {value}
      </div>
    </div>
  );
}

/* ----------  MARQUEE / POSITIONING STRIP  ---------- */
function Marquee() {
  const words = ['AI-Augmented Operations', 'GTM Infrastructure', 'Revenue Systems', 'Implementation', 'People Ops', 'AI Workflows', 'Cross-Functional Execution', 'Strategic Initiatives'];
  const row = [...words, ...words, ...words];
  return (
    <div style={{
      borderTop: '1px solid var(--rule)',
      borderBottom: '1px solid var(--rule)',
      padding: '22px 0',
      overflow: 'hidden',
      background: 'rgba(0,0,0,0.15)',
    }}>
      <div className="marquee-row" style={{
        display: 'flex', gap: 48, whiteSpace: 'nowrap',
        animation: 'marquee 33s linear infinite',
        fontFamily: 'var(--serif)',
        fontSize: 28,
        fontWeight: 300,
        letterSpacing: '-0.01em',
      }}>
        {row.map((w, i) => (
          <span key={i} style={{ display: 'inline-flex', gap: 48, alignItems: 'center' }}>
            <span style={{ color: i % 2 ? 'var(--ink)' : 'var(--mute)' }}>{w}</span>
            <span style={{ color: 'var(--accent-2)', fontFamily: 'var(--mono)', fontSize: 14 }}>◆</span>
          </span>
        ))}
      </div>
      <style>{`
        @keyframes marquee {
          from { transform: translateX(0); }
          to { transform: translateX(-33.333%); }
        }
      `}</style>
    </div>
  );
}

/* ----------  WHEN TO BRING ME IN  ---------- */
function WhenToBring() {
  return (
    <section className="container" style={{ paddingBottom: 48 }}>
      <SectionHeader
        id="when"
        kicker="When to bring me in"
        title={<>Eight signs <span className="serif-italic">the operation</span> is the bottleneck.</>}
        intro="Most of my work begins at one of these inflection points. If any of these feel familiar, we should talk."
      />
      <div className="when-grid" style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
        gap: 0,
        borderTop: '1px solid var(--rule)',
        marginTop: 24,
      }}>
        {window.WHEN_ITEMS.map((text, i) => (
          <Reveal key={i} delay={i * 40}>
            <WhenCard idx={i + 1} text={text} />
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function WhenCard({ idx, text }) {
  const [hover, setHover] = useState2(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        padding: '36px 32px 44px',
        borderRight: '1px solid var(--rule)',
        borderBottom: '1px solid var(--rule)',
        minHeight: 220,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        background: hover ? 'rgba(240,236,228,0.025)' : 'transparent',
        transition: 'background 300ms ease',
        position: 'relative',
      }}
    >
      <div style={{
        fontFamily: 'var(--mono)',
        fontSize: 12,
        color: hover ? 'var(--accent)' : 'var(--mute)',
        letterSpacing: '0.14em',
        transition: 'color 300ms ease',
      }}>
        0{idx}
      </div>
      <p style={{
        fontFamily: 'var(--serif)',
        fontSize: 22,
        fontWeight: 400,
        lineHeight: 1.25,
        letterSpacing: '-0.01em',
        margin: 0,
        marginTop: 'auto',
        textWrap: 'pretty',
        color: 'var(--ink)',
      }}>
        {text}
      </p>
    </div>
  );
}

/* ----------  SERVICES  ---------- */
function Services() {
  return (
    <section className="container">
      <SectionHeader
        id="services"
        kicker="What I do"
        title={<>Systems and initiatives that turn <span className="serif-italic">strategy</span> into results.</>}
        intro="I work with growing companies, typically seed to Series B, that need the work in these areas done but don't have anyone to own it. Most engagements focus on one or two of these areas based on what the company needs most."
      />
      <div style={{
        borderTop: '1px solid var(--rule-2)',
        marginTop: 24,
      }}>
        {window.SERVICES.map((s, i) => (
          <Reveal key={i} delay={i * 50}>
            <ServiceRow idx={i + 1} service={s} />
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function ServiceRow({ idx, service }) {
  return (
    <div style={{
      borderBottom: '1px solid var(--rule)',
      padding: '32px 0',
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(80px, 1fr) minmax(220px, 2fr) 5fr',
        gap: 40,
        alignItems: 'start',
      }} className="service-row">
        <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--mute)', letterSpacing: '0.14em', paddingTop: 10 }}>
          0{idx}
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>{service.tag}</div>
          <h3 style={{
            fontFamily: 'var(--serif)',
            fontWeight: 400,
            fontSize: 'clamp(26px, 2.8vw, 38px)',
            lineHeight: 1.1,
            letterSpacing: '-0.02em',
            margin: 0,
            textWrap: 'balance',
          }}>
            {service.title}
          </h3>
        </div>
        <div>
          <p style={{ margin: 0, color: 'var(--ink-2)', fontSize: 16, lineHeight: 1.65, textWrap: 'pretty' }}>
            {service.body}
          </p>
          <div style={{ display: 'flex', gap: 8, marginTop: 20, flexWrap: 'wrap' }}>
            {service.stack.map(s => (
              <span key={s} style={{
                fontFamily: 'var(--mono)',
                fontSize: 11,
                padding: '4px 10px',
                border: '1px solid var(--rule-2)',
                color: 'var(--mute)',
                letterSpacing: '0.06em',
              }}>{s}</span>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 800px) {
          .service-row { grid-template-columns: 1fr !important; grid-template-areas: 'num' 'head' 'body' !important; }
          .service-row > *:nth-child(1) { grid-area: num; }
          .service-row > *:nth-child(2) { grid-area: head; }
          .service-row > *:nth-child(3) { grid-area: body; }
        }
      `}</style>
    </div>
  );
}

/* ----------  WORK  ---------- */
function Work() {
  return (
    <section className="container">
      <SectionHeader
        id="work"
        kicker="Selected work"
        title={<>What this looks like <span className="serif-italic">in practice.</span></>}
        intro="From operating systems to revenue to GTM."
      />
      <div style={{ marginTop: 24 }}>
        {window.WORK.map((w, i) => (
          <Reveal key={w.id} delay={40}>
            <WorkItem work={w} index={i} />
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function StatRow({ stat }) {
  const [hover, setHover] = useState2(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex',
        alignItems: 'baseline',
        gap: 20,
        padding: '18px 0',
        borderBottom: '1px solid var(--rule)',
      }}
    >
      <div style={{
        fontFamily: 'var(--serif)',
        fontSize: 'clamp(32px, 3.4vw, 44px)',
        fontWeight: 400,
        lineHeight: 1,
        letterSpacing: '-0.03em',
        color: hover ? 'var(--accent)' : 'var(--ink)',
        minWidth: 140,
        fontVariantNumeric: 'tabular-nums',
        transition: 'color 400ms ease, transform 500ms cubic-bezier(.2,.7,.2,1)',
        transform: hover ? 'translateX(2px)' : 'translateX(0)',
      }}>
        {stat.value}
      </div>
      <div style={{
        fontSize: 13,
        color: hover ? 'var(--ink-2)' : 'var(--mute)',
        letterSpacing: '0.01em',
        textTransform: 'lowercase',
        transition: 'color 400ms ease',
      }}>
        {stat.label}
      </div>
    </div>
  );
}

function WorkItem({ work, index }) {
  const [hover, setHover] = useState2(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(80px, 1fr) 4fr 5fr',
        gap: 40,
        padding: '56px 0 64px',
        borderTop: '1px solid var(--rule)',
        position: 'relative',
        transition: 'background 600ms cubic-bezier(.2,.7,.2,1)',
        background: hover ? 'rgba(240,236,228,0.015)' : 'transparent',
      }} className="work-item">
      {/* Accent rail that grows on hover */}
      <span style={{
        position: 'absolute', top: -1, left: 0,
        height: 1,
        width: hover ? '64px' : '0px',
        background: 'var(--accent)',
        transition: 'width 700ms cubic-bezier(.2,.7,.2,1)',
      }} aria-hidden></span>

      <div>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.14em',
          color: hover ? 'var(--accent)' : 'var(--mute)',
          transition: 'color 500ms ease, transform 500ms cubic-bezier(.2,.7,.2,1)',
          transform: hover ? 'translateX(4px)' : 'translateX(0)',
        }}>
          /{work.id}
        </div>
      </div>

      <div>
        <div className="eyebrow" style={{ marginBottom: 16, color: 'var(--accent)' }}>{work.category}</div>
        <div style={{
          fontFamily: 'var(--mono)',
          fontSize: 13,
          color: 'var(--mute)',
          marginBottom: 24,
          letterSpacing: '0.03em',
        }}>{work.context}</div>
        <h3 style={{
          fontFamily: 'var(--serif)',
          fontWeight: 400,
          fontSize: 'clamp(26px, 2.6vw, 36px)',
          lineHeight: 1.1,
          letterSpacing: '-0.02em',
          margin: 0,
          textWrap: 'balance',
        }}>
          {work.title}
        </h3>

        {/* Stats */}
        <div style={{ marginTop: 36, display: 'grid', gap: 2, borderTop: '1px solid var(--rule)' }}>
          {work.stats.map((stat, i) => (
            <Reveal key={i} delay={120 + i * 110}>
              <StatRow stat={stat} />
            </Reveal>
          ))}
        </div>
      </div>

      <div style={{ paddingTop: 40 }}>
        <WorkBody body={work.body} />
      </div>

      <style>{`
        @media (max-width: 900px) {
          .work-item { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </article>
  );
}

function WorkBody({ body }) {
  const paragraphs = body.split(/\n\n+/);
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== 'undefined' ? window.innerWidth <= 700 : false
  );
  const [expanded, setExpanded] = React.useState(false);

  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 700px)');
    const onChange = (e) => setIsMobile(e.matches);
    setIsMobile(mq.matches);
    if (mq.addEventListener) mq.addEventListener('change', onChange);
    else mq.addListener(onChange);
    return () => {
      if (mq.removeEventListener) mq.removeEventListener('change', onChange);
      else mq.removeListener(onChange);
    };
  }, []);

  const paraStyle = (i) => ({
    margin: i === 0 ? 0 : '18px 0 0',
    color: 'var(--ink-2)',
    fontSize: 16,
    lineHeight: 1.7,
    textWrap: 'pretty',
  });

  // Desktop: always show everything
  if (!isMobile) {
    return (
      <>
        {paragraphs.map((para, i) => (
          <p key={i} style={paraStyle(i)}>{para}</p>
        ))}
      </>
    );
  }

  // Mobile: show first paragraph clamped to ~3 lines until expanded
  const firstPara = paragraphs[0];
  const restParas = paragraphs.slice(1);

  return (
    <>
      <p style={{
        ...paraStyle(0),
        ...(expanded ? {} : {
          display: '-webkit-box',
          WebkitLineClamp: 3,
          WebkitBoxOrient: 'vertical',
          overflow: 'hidden',
        }),
      }}>
        {firstPara}
      </p>

      {expanded && restParas.map((para, i) => (
        <p key={i + 1} style={paraStyle(i + 1)}>{para}</p>
      ))}

      <button
        type="button"
        onClick={() => setExpanded(v => !v)}
        style={{
          marginTop: 14,
          background: 'none',
          border: 'none',
          padding: 0,
          cursor: 'pointer',
          fontFamily: 'var(--mono)',
          fontSize: 13,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          color: 'var(--accent)',
          display: 'inline-flex',
          alignItems: 'center',
          gap: 8,
          WebkitTapHighlightColor: 'transparent',
          touchAction: 'manipulation',
        }}
      >
        {expanded ? 'Show less' : 'Read more'}
        <span style={{
          display: 'inline-block',
          transition: 'transform 220ms ease',
          transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
        }}>↓</span>
      </button>
    </>
  );
}

/* ----------  PROCESS  ---------- */
function Process() {
  return (
    <section className="container">
      <SectionHeader
        id="process"
        kicker="How it works"
        title={<>I start by understanding what’s <span className="serif-italic">actually</span> needed.</>}
      />

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 0,
        marginTop: 24,
        borderTop: '1px solid var(--rule-2)',
        alignItems: 'stretch',
      }} className="process-grid">
        {window.PROCESS.map((p, i) => (
          <Reveal key={p.id} delay={i * 120} style={{ display: 'flex', flexDirection: 'column' }}>
            <ProcessCard step={p} last={i === window.PROCESS.length - 1} />
          </Reveal>
        ))}
      </div>

      <Reveal delay={300}>
        <div style={{
          marginTop: 72,
          padding: '40px 48px',
          border: '1px solid var(--rule-2)',
          background: 'var(--bg-raise)',
          display: 'grid',
          gridTemplateColumns: '1fr',
          gap: 36,
          alignItems: 'center',
        }} className="engage-box">
          <div>
            <div className="eyebrow" style={{ marginBottom: 12, color: 'var(--accent)' }}>Engagement structure</div>
            <p style={{
              margin: 0,
              fontFamily: 'var(--serif)',
              fontSize: 'clamp(20px, 1.8vw, 26px)',
              fontWeight: 400,
              lineHeight: 1.35,
              color: 'var(--ink)',
              textWrap: 'pretty',
            }}>
              Engagements are structured as monthly retainers, typically 10 to 20 hours per week with a 3 month minimum. Every engagement begins with an initial assessment so I’m solving the right problems from day one.
            </p>
          </div>
        </div>
      </Reveal>

      <style>{`
        @media (max-width: 900px) {
          .process-grid { grid-template-columns: 1fr !important; }
          .engage-box { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function ProcessCard({ step, last }) {
  const [hover, setHover] = useState2(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        padding: '40px 36px 48px',
        borderRight: last ? 'none' : '1px solid var(--rule)',
        borderBottom: '1px solid var(--rule)',
        minHeight: 340,
        display: 'flex',
        flexDirection: 'column',
        flex: 1,
        width: '100%',
        height: '100%',
        position: 'relative',
        transition: 'background 600ms cubic-bezier(.2,.7,.2,1)',
        background: hover ? 'rgba(240,236,228,0.022)' : 'transparent',
      }} className="proc-card">
      {/* Accent top-rail */}
      <span style={{
        position: 'absolute', top: 0, left: 0,
        height: 1,
        width: hover ? '100%' : '0%',
        background: 'var(--accent)',
        transition: 'width 800ms cubic-bezier(.2,.7,.2,1)',
      }} aria-hidden></span>

      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 48,
      }}>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--accent)',
          letterSpacing: '0.14em',
          transition: 'transform 500ms cubic-bezier(.2,.7,.2,1), letter-spacing 500ms ease',
          transform: hover ? 'translateY(-2px)' : 'translateY(0)',
          letterSpacing: hover ? '0.18em' : '0.14em',
        }}>
          STEP {step.id}
        </div>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--mute)',
          letterSpacing: '0.1em', textTransform: 'uppercase',
        }}>
          {step.duration}
        </div>
      </div>
      <h3 style={{
        fontFamily: 'var(--serif)',
        fontWeight: 400,
        fontSize: 'clamp(28px, 2.6vw, 36px)',
        lineHeight: 1.1,
        letterSpacing: '-0.02em',
        margin: 0,
        textWrap: 'balance',
      }}>
        {step.title}
      </h3>
      <p style={{
        margin: '24px 0 0',
        color: 'var(--ink-2)',
        fontSize: 15,
        lineHeight: 1.65,
        textWrap: 'pretty',
      }}>
        {step.body}
      </p>
    </div>
  );
}

/* ----------  ABOUT  ---------- */
function About() {
  return (
    <section className="container">
      <SectionHeader
        id="about"
        kicker="About"
        title={<>8+ years in healthcare and health tech, from <span className="serif-italic">Fortune 500</span> to <span className="serif-italic">early-stage</span>.</>}
      />

      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 2fr',
        gap: 72,
        marginTop: 24,
        borderTop: '1px solid var(--rule)',
        paddingTop: 56,
      }} className="about-grid">
        <Reveal>
          <div className="about-portrait-wrap" style={{ position: 'sticky', top: 120 }}>
            <div className="about-portrait" style={{
              aspectRatio: '4 / 5',
              maxWidth: 320,
              border: '1px solid var(--rule-2)',
              padding: 12,
              background: 'var(--bg-raise)',
              marginLeft: 0,
              marginRight: 'auto',
            }}>
              <div style={{
                width: '100%', height: '100%',
                background: `url('assets/alex.png') center/cover no-repeat`,
                filter: 'grayscale(0.3) contrast(1.02)',
              }}></div>
            </div>
          </div>
        </Reveal>

        <div>
          <Reveal>
            <p style={{
              fontFamily: 'var(--serif)',
              fontSize: 'clamp(24px, 2.2vw, 32px)',
              fontWeight: 400,
              lineHeight: 1.35,
              letterSpacing: '-0.015em',
              margin: 0,
              color: 'var(--ink)',
              textWrap: 'pretty',
            }}>
              I gravitate toward environments where things are complex, fast moving, and under built. I like understanding how a company actually runs, spotting the gaps, and building what’s missing.
            </p>
          </Reveal>

          <Reveal delay={100}>
            <p style={{
              marginTop: 36,
              color: 'var(--ink-2)',
              fontSize: 17,
              lineHeight: 1.7,
              maxWidth: 620,
              textWrap: 'pretty',
            }}>
              I think in systems, not tasks. When I look at a company, I'm looking at how things connect, where the same problems keep recurring, and what would fix the root cause instead of the symptom. I go deep into the details until I understand how things actually work, and then I build the structure that makes them work better. Everything I build is designed to outlast me.
            </p>
          </Reveal>

          <Reveal delay={160}>
            <p style={{
              marginTop: 24,
              color: 'var(--ink-2)',
              fontSize: 17,
              lineHeight: 1.7,
              maxWidth: 620,
              textWrap: 'pretty',
            }}>
              I've spent 8+ years in health tech and healthcare, from Fortune 500 to early-stage startup. The pattern is the same anywhere: growing companies need operational infrastructure, and most don't have it yet.
            </p>
          </Reveal>

          <Reveal delay={220}>
            <p style={{
              marginTop: 24,
              color: 'var(--ink-2)',
              fontSize: 17,
              lineHeight: 1.7,
              maxWidth: 620,
              textWrap: 'pretty',
            }}>
              I work best with founders and leadership teams who are building something meaningful and have hit the point where the internal operations can't keep up with the ambition.
            </p>
          </Reveal>

          <Reveal delay={280}>
            <p style={{
              marginTop: 24,
              color: 'var(--ink-2)',
              fontSize: 17,
              lineHeight: 1.7,
              maxWidth: 620,
              textWrap: 'pretty',
            }}>

            </p>
          </Reveal>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .about-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .about-grid > div:first-child > div:first-child { position: static !important; }
        }
      `}</style>
    </section>
  );
}

function MetaRow({ label, value }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '100px 1fr',
      gap: 16,
      alignItems: 'baseline',
      borderTop: '1px solid var(--rule)',
      paddingTop: 14,
    }}>
      <div style={{
        fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--mute)',
        letterSpacing: '0.14em', textTransform: 'uppercase',
      }}>{label}</div>
      <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5 }}>{value}</div>
    </div>
  );
}

/* ----------  CONTACT / FOOTER  ---------- */
function Contact() {
  return (
    <section id="contact" className="contact-section" style={{
      marginTop: 160,
      borderTop: '1px solid var(--rule-2)',
      padding: '120px 0 80px',
      position: 'relative',
    }}>
      <div className="container">
        <Reveal>
          <div className="eyebrow contact-eyebrow" style={{ marginBottom: 40, color: 'var(--accent)' }}>Get in touch</div>
        </Reveal>

        <Reveal delay={80}>
          <h2 className="contact-headline" style={{
            fontFamily: 'var(--serif)',
            fontWeight: 300,
            fontSize: 'clamp(44px, 6.4vw, 108px)',
            lineHeight: 1,
            letterSpacing: '-0.035em',
            margin: 0,
            textWrap: 'balance',
            maxWidth: '14ch',
            fontVariationSettings: '"opsz" 144',
          }}>
            Share what<br />
            you’re <span className="serif-italic" style={{ fontWeight: 400 }}>building.</span>
          </h2>
        </Reveal>

        <Reveal delay={200}>
          <div className="contact-book" style={{
            marginTop: 80,
            paddingTop: 36,
            borderTop: '1px solid var(--rule)',
          }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Book</div>

            <div className="contact-ctas" style={{ marginTop: 28, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <PrimaryBtn href="https://calendly.com/alexfarris9/25min" target="_blank" rel="noopener noreferrer">Book a conversation <ArrowRight /></PrimaryBtn>
              <GhostBtn href="mailto:alex@alexfarris.co">Email directly</GhostBtn>
            </div>
          </div>
        </Reveal>
      </div>

      {/* Footer strip */}
      <div style={{
        marginTop: 120,
        borderTop: '1px solid var(--rule)',
        padding: '28px 0',
      }}>
        <div className="container footer-strip" style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--mute)',
          letterSpacing: '0.1em', textTransform: 'uppercase',
          flexWrap: 'wrap', gap: 16,
        }}>
          <span>© Alex Farris · 2026</span>
          <span>Fractional Operations · Health · Wellness · Tech</span>
          <span>Los Angeles</span>
        </div>
      </div>

      <style>{`
        @media (max-width: 800px) {
          .contact-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 560px) {
          .contact-section .contact-eyebrow,
          .contact-section .contact-headline,
          .contact-section .contact-book .eyebrow {
            text-align: center !important;
          }
          .contact-section .contact-headline {
            margin-left: auto !important;
            margin-right: auto !important;
          }
          .contact-section .contact-ctas {
            justify-content: center !important;
          }
          .about-portrait {
            margin-left: auto !important;
            margin-right: auto !important;
          }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Marquee, WhenToBring, Services, Work, Process, About, Contact });
