// DiLeonardo & Shaw — main app

const { useState, useEffect, useRef, useMemo } = React;

// ────── Logo (uses existing PNG mark, no SVG variants) ──────

const LogoMark = ({ size = 40, color = "currentColor", animated = false, /* variant ignored */ }) => {
  return (
    <img
      src="/img/logo.png"
      alt="DiLeonardo & Shaw"
      className={animated ? "logo-img logo-img--reveal" : "logo-img"}
      style={{ width: size, height: size, objectFit: 'contain', display: 'block' }}
    />
  );
};

// ────── Word reveal ──────

const RevealHeadline = ({ children, delay = 0 }) => {
  const words = Array.isArray(children) ? children : [children];
  let cumulativeDelay = delay;
  return (
    <>
      {words.map((w, i) => {
        const text = typeof w === 'string' ? w : w.text;
        const italic = typeof w === 'object' && w.italic;
        const node = (
          <span
            key={i}
            className="reveal-word"
            style={{ marginRight: '0.18em' }}
          >
            <span style={{ animationDelay: `${cumulativeDelay}ms`, fontStyle: italic ? 'italic' : 'normal', color: italic ? 'var(--gold)' : undefined }}>
              {text}
            </span>
          </span>
        );
        cumulativeDelay += 80;
        return node;
      })}
    </>
  );
};

// ────── Nav ──────

const Nav = ({ onOpenModal }) => {
  const [scrolled, setScrolled] = useState(false);
  const [onDark, setOnDark] = useState(true);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 40);
      const y = window.scrollY + 60;
      const darkSections = document.querySelectorAll('.is-dark-section');
      let dark = false;
      darkSections.forEach(s => {
        const r = s.getBoundingClientRect();
        const top = r.top + window.scrollY;
        const bot = top + r.height;
        if (y >= top && y <= bot) dark = true;
      });
      setOnDark(dark);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav className={`nav ${scrolled ? 'is-scrolled' : ''} ${onDark ? 'on-dark' : ''}`}>
      <a href="/" className="nav-brand">
        <img src="/img/logo-mark.png" alt="" className="nav-mark" aria-hidden="true" />
        <span>DiLeonardo <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>&amp;</em> Shaw</span>
      </a>
      <div className="nav-links">
        <a href="/practice-areas/" className="nav-link">Practice</a>
        <a href="/attorneys/" className="nav-link">Attorneys</a>
        <a href="/about/" className="nav-link">About</a>
        <a href="/blog/" className="nav-link">Insights</a>
        <a href="/contact/" className="nav-link">Contact</a>
      </div>
      <button onClick={onOpenModal} className="nav-cta">
        <span className="nav-cta-dot"></span>
        Schedule a call
      </button>
    </nav>
  );
};

// ────── Hero ──────

const Hero = ({ onOpenModal }) => {
  return (
    <section className="hero is-dark-section" id="main-content">
      <div className="hero-meta">
        <span className="hero-meta-dot">Now accepting cases · DE · NJ · PA</span>
        <span>est. 2024 · Wilmington</span>
        <span>(302) 217-3187</span>
      </div>

      <div className="hero-body">
        <h1 className="hero-headline">
          <div style={{ marginBottom: '0.04em' }}>
            <RevealHeadline delay={300}>{[{ text: 'Injured?' }]}</RevealHeadline>
          </div>
          <div>
            <RevealHeadline delay={500}>{[{ text: 'We' }, { text: 'carry', italic: true }, { text: 'the' }]}</RevealHeadline>
          </div>
          <div>
            <RevealHeadline delay={900}>{[{ text: 'fight' }, { text: 'for' }, { text: 'you.' }]}</RevealHeadline>
          </div>
        </h1>

        <div className="hero-aside">
          <p className="hero-lede">
            When negligence changes your life, you deserve a legal team that fights without compromise. <strong>We've been doing this for decades</strong> — and we don't get paid unless you do.
          </p>
          <div className="hero-cta-row">
            <button onClick={onOpenModal} className="btn btn-primary">
              Free Case Review
              <span className="btn-arrow">→</span>
            </button>
            <a href="tel:+13022173187" className="btn btn-ghost">
              (302) 217-3187
            </a>
          </div>
        </div>
      </div>

      <div className="hero-foot">
        <div className="hero-foot-cell">
          <div className="hero-foot-num">$0</div>
          <div className="hero-foot-label">Owed unless we win</div>
        </div>
        <div className="hero-foot-cell">
          <div className="hero-foot-num">24/7</div>
          <div className="hero-foot-label">Intake response</div>
        </div>
        <div className="hero-foot-cell">
          <div className="hero-foot-num">3 states</div>
          <div className="hero-foot-label">DE · NJ · PA</div>
        </div>
        <div className="hero-foot-cell">
          <div className="hero-foot-num">30+</div>
          <div className="hero-foot-label">Years combined</div>
        </div>
      </div>
    </section>
  );
};

// ────── Marquee ──────

const Marquee = () => {
  const items = [
    'Personal Injury', 'Trucking Accidents', 'Medical Malpractice',
    'Nursing Home Abuse', 'Slip & Fall', 'Business Counsel',
    'Auto Accidents', 'Premises Liability'
  ];
  const list = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        <span>
          {list.map((it, i) => (
            <React.Fragment key={i}>
              <span style={{ fontStyle: 'italic' }}>{it}</span>
              <span className="marquee-dot"></span>
            </React.Fragment>
          ))}
        </span>
      </div>
    </div>
  );
};

window.LogoMark = LogoMark;
window.Nav = Nav;
window.Hero = Hero;
window.Marquee = Marquee;
window.RevealHeadline = RevealHeadline;