/* global React, ReactDOM */
// rex — marketing site (v2)
// Ported from the Claude Design handoff bundle.
// Trimmed for production: designer-only TweaksPanel + dead components
// (ReviewSection, FloorPlan, FlowDiagram, FgiCoverage, TalkSection, and the
// unused Rule / RevMark / CornerTicks / TitleBlock primitives) removed.
const { useState, useEffect } = React;

// -----------------------------------------------------------------------------
// Small primitives
// -----------------------------------------------------------------------------

const Mono = ({ children, style, className = '', as: Tag = 'span' }) => (
  <Tag className={`mono ${className}`} style={style}>{children}</Tag>
);

// -----------------------------------------------------------------------------
// WORD CYCLE — stacked list, one highlighted at a time
// -----------------------------------------------------------------------------

const WordCycle = ({ words, interval = 1500 }) => {
  const [i, setI] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setI(v => (v + 1) % words.length), interval);
    return () => clearInterval(id);
  }, [words.length, interval]);

  return (
    <ul className="wc" aria-live="polite">
      {words.map((w, idx) => (
        <li
          key={w}
          className={`wc__item ${idx === i ? 'wc__item--on' : ''}`}
          aria-current={idx === i ? 'true' : undefined}
        >
          {w}
        </li>
      ))}
    </ul>
  );
};

// -----------------------------------------------------------------------------
// HEADER — logo only (no nav)
// -----------------------------------------------------------------------------

const Header = () => (
  <header className="hdr hdr--over">
    <a href="#" className="hdr__logo">
      <img src="assets/rex_brand_logo.png" alt="" />
    </a>
    <nav className="hdr__nav mono"></nav>
  </header>
);

// -----------------------------------------------------------------------------
// HERO — full-bleed warehouse photo with stacked cycling words + dino mascot
// -----------------------------------------------------------------------------

const Hero = () => {
  const cycleWords = ['Re-do', 'Re-vise', 'Re-plan', 'Re-draw', 'Re-iterate'];

  return (
    <section className="hero" aria-label="Hero">
      <img className="hero__bg" src="assets/warehouse.jpg" alt="" aria-hidden="true" />
      <div className="hero__veil" />

      <div className="hero__inner">
        <div className="hero__left">
          <WordCycle words={cycleWords} interval={1400} />
          <h1 className="hero__wordmark">rex</h1>
          <p className="hero__lede">
            Schematic design validation for healthcare architects. rex reads your set against the
            FGI Guidelines — clearance by clearance — and marks up what's wrong before drawings leave your office.
          </p>
          <div className="hero__actions">
            <a href="mailto:ryanw2@andrew.cmu.edu" className="btn btn--primary btn--lg">
              Talk to the team
              <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
                <path d="M2 7 H12 M8 3 L12 7 L8 11" stroke="currentColor" strokeWidth="1.2" fill="none" />
              </svg>
            </a>
          </div>
        </div>

        <aside className="hero__mascot" aria-label="Rex mascot">
          <img className="hero__dino-img" src="assets/rex_dino_logo.png" alt="rex — pixel dinosaur mascot" />
          <div className="bubble">
            <p className="bubble__text">
              Hi, I'm <strong>rex</strong>.<br />
              I read floor plans so you don't have to.
            </p>
            <span className="bubble__tail" aria-hidden="true" />
          </div>
        </aside>
      </div>
    </section>
  );
};

// -----------------------------------------------------------------------------
// TEAM BAR — founder avatars + company logos between hero and carousel
// -----------------------------------------------------------------------------

const TeamBar = () => (
  <section className="team-bar">
    <div className="team-bar__inner">
      <Mono>SUPPORTED BY A TEAM FROM</Mono>
      <div className="team-bar__row">
        <div className="team-bar__founders">
          <img className="team-bar__avatar" src="assets/founder-1.jpg" alt="Founder" />
          <img className="team-bar__avatar" src="assets/founder-2.jpg" alt="Founder" />
          <img className="team-bar__avatar" src="assets/founder-3.jpg" alt="Founder" />
        </div>
        <div className="team-bar__divider" />
        <div className="team-bar__logos">
          <img className="team-bar__logo" src="assets/cmu-wordmark.svg" alt="Carnegie Mellon University" />
          <img className="team-bar__logo" src="assets/tiktok.svg" alt="TikTok" />
          <img className="team-bar__logo" src="assets/roblox.svg" alt="Roblox" style={{ height: 28 }} />
        </div>
      </div>
    </div>
  </section>
);

// -----------------------------------------------------------------------------
// PROBLEM — market context after team bar
// -----------------------------------------------------------------------------

const Problem = () => (
  <section className="problem">
    <Mono>THE PROBLEM</Mono>
    <div className="problem__inner" style={{ marginTop: 32 }}>
      <h2 className="problem__h">
        Healthcare construction is a $60B market.<br />
        Code review is still <em>manual</em>.
      </h2>
      <div>
        <p className="problem__body">
          Every schematic set is checked line-by-line against the FGI Guidelines — thousands of
          clearances, room-by-room. Architects spend weeks on reviews that rex finishes in minutes.
        </p>
        <div className="problem__stat">
          <span className="problem__stat-n">83%</span>
          <span className="problem__stat-label">
            of healthcare project delays trace back to code and compliance issues caught too late in the process.
          </span>
        </div>
      </div>
    </div>
  </section>
);

// -----------------------------------------------------------------------------
// CAROUSEL — full-bleed slide deck of rex output diagrams (between hero/workflow)
// -----------------------------------------------------------------------------

const CAROUSEL_SLIDES = [
  { src: 'assets/bubble_diagram.png',             n: '01', tag: 'PROGRAM',   title: 'Bubble diagram' },
  { src: 'assets/architect_stacking_diagram.png', n: '02', tag: 'STACKING',  title: 'Stacking — architect view' },
  { src: 'assets/doctor_stacking_diagram.png',    n: '03', tag: 'STACKING',  title: 'Stacking — clinical view' },
  { src: 'assets/code_revision.png',              n: '04', tag: 'REVISION',  title: 'Marked-up code revision' },
];

const Carousel = ({ slides = CAROUSEL_SLIDES, interval = 8000 }) => {
  const [i, setI] = useState(0);
  const go = (idx) => setI((idx + slides.length) % slides.length);

  useEffect(() => {
    const id = setInterval(() => setI(v => (v + 1) % slides.length), interval);
    return () => clearInterval(id);
  }, [slides.length, interval]);

  const cur = slides[i];

  return (
    <section className="carousel" aria-label="rex output gallery" aria-roledescription="carousel">
      <div className="carousel__head">
        <Mono>WHAT REX PRODUCES</Mono>
        <Mono style={{ opacity: 0.6 }}>
          {cur.n} / {String(slides.length).padStart(2, '0')}
        </Mono>
      </div>

      <div className="carousel__stage">
        <button
          className="carousel__arrow carousel__arrow--prev"
          onClick={() => go(i - 1)}
          aria-label="Previous slide"
        >
          <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
            <path d="M10 2 L4 8 L10 14" stroke="currentColor" strokeWidth="1.4" fill="none" />
          </svg>
        </button>

        <figure className="carousel__frame">
          <div className="carousel__track">
            {slides.map((s, idx) => (
              <img
                key={s.src}
                className={`carousel__img ${idx === i ? 'carousel__img--on' : ''}`}
                src={s.src}
                alt={s.title}
                aria-hidden={idx === i ? undefined : 'true'}
                loading="lazy"
              />
            ))}
          </div>
          <figcaption className="carousel__cap">
            <Mono className="carousel__cap-tag">{cur.tag}</Mono>
            <span className="carousel__cap-title">{cur.title}</span>
          </figcaption>
        </figure>

        <button
          className="carousel__arrow carousel__arrow--next"
          onClick={() => go(i + 1)}
          aria-label="Next slide"
        >
          <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
            <path d="M6 2 L12 8 L6 14" stroke="currentColor" strokeWidth="1.4" fill="none" />
          </svg>
        </button>
      </div>

      <div className="carousel__dots" role="tablist" aria-label="Choose slide">
        {slides.map((s, idx) => (
          <button
            key={s.src}
            className={`carousel__dot ${idx === i ? 'carousel__dot--on' : ''}`}
            onClick={() => go(idx)}
            aria-label={`Go to ${s.title}`}
            aria-selected={idx === i}
            role="tab"
          />
        ))}
      </div>
    </section>
  );
};

// -----------------------------------------------------------------------------
// WORKFLOW — 4 numbered info cards, step 3 highlighted (agent step)
// -----------------------------------------------------------------------------

const WorkflowIcon = ({ which, accent }) => {
  const ink = accent ? 'var(--paper)' : 'var(--ink)';
  const acc = accent ? 'var(--paper)' : 'var(--accent)';
  const fill = accent ? 'transparent' : 'var(--paper)';
  const common = { viewBox: '0 0 64 64', width: '100%', height: '100%', fill: 'none' };
  if (which === 0) return (
    <svg {...common}>
      <rect x="8"  y="14" width="32" height="40" stroke={ink} strokeWidth="1.2" fill={fill} />
      <rect x="14" y="10" width="32" height="40" stroke={ink} strokeWidth="1.2" fill={fill} />
      <rect x="20" y="6"  width="32" height="40" stroke={ink} strokeWidth="1.2" fill={fill} />
      <line x1="26" y1="16" x2="46" y2="16" stroke={ink} strokeWidth="0.8" />
      <line x1="26" y1="22" x2="46" y2="22" stroke={ink} strokeWidth="0.8" />
      <line x1="26" y1="28" x2="40" y2="28" stroke={ink} strokeWidth="0.8" />
      <path d="M30 38 L36 44 L30 50" stroke={acc} strokeWidth="1.4" />
      <line x1="22" y1="44" x2="36" y2="44" stroke={acc} strokeWidth="1.4" />
    </svg>
  );
  if (which === 1) return (
    <svg {...common}>
      <rect x="8" y="10" width="48" height="44" stroke={ink} strokeWidth="1.2" />
      <line x1="8" y1="22" x2="56" y2="22" stroke={ink} strokeWidth="0.6" strokeDasharray="2 3" />
      <circle cx="20" cy="36" r="6" stroke={ink} strokeWidth="1" />
      <circle cx="34" cy="40" r="8" stroke={acc} strokeWidth="1.2" />
      <circle cx="46" cy="34" r="5" stroke={ink} strokeWidth="1" />
      <line x1="20" y1="36" x2="34" y2="40" stroke={ink} strokeWidth="0.6" strokeDasharray="2 2" />
      <line x1="34" y1="40" x2="46" y2="34" stroke={ink} strokeWidth="0.6" strokeDasharray="2 2" />
    </svg>
  );
  if (which === 2) return (
    // Design with the agent — chat bubble overlapping plan
    <svg {...common}>
      <rect x="6" y="8"  width="40" height="38" stroke={ink} strokeWidth="1.2" />
      <line x1="6"  y1="28" x2="46" y2="28" stroke={ink} strokeWidth="0.7" />
      <line x1="26" y1="8"  x2="26" y2="46" stroke={ink} strokeWidth="0.7" />
      <path d="M12 18 L16 22 L22 14" stroke={ink} strokeWidth="1.3" />
      <g stroke={acc} strokeWidth="1.4" fill={accent ? 'transparent' : 'var(--paper)'}>
        <rect x="28" y="30" width="30" height="22" rx="3" />
      </g>
      <path d="M34 52 L34 56 L40 52" stroke={acc} strokeWidth="1.4" fill="none" />
      <g fill={acc}>
        <circle cx="36" cy="41" r="1.6" />
        <circle cx="43" cy="41" r="1.6" />
        <circle cx="50" cy="41" r="1.6" />
      </g>
    </svg>
  );
  return (
    <svg {...common}>
      <rect x="6"  y="14" width="22" height="32" stroke={ink} strokeWidth="1.2" />
      <rect x="32" y="14" width="22" height="32" stroke={acc} strokeWidth="1.2" fill={accent ? 'transparent' : 'var(--accent)'} fillOpacity={accent ? 1 : 0.18} />
      <rect x="32" y="14" width="22" height="32" stroke={acc} strokeWidth="1.2" fill="none" />
      <line x1="10" y1="22" x2="24" y2="22" stroke={ink} strokeWidth="0.6" />
      <line x1="10" y1="28" x2="24" y2="28" stroke={ink} strokeWidth="0.6" />
      <line x1="10" y1="34" x2="20" y2="34" stroke={ink} strokeWidth="0.6" />
      <line x1="36" y1="22" x2="50" y2="22" stroke={acc} strokeWidth="0.6" />
      <line x1="36" y1="28" x2="50" y2="28" stroke={acc} strokeWidth="0.6" />
      <line x1="36" y1="34" x2="46" y2="34" stroke={acc} strokeWidth="0.6" />
      <path d="M24 54 L34 54 M30 50 L34 54 L30 58" stroke={ink} strokeWidth="1.2" fill="none" />
    </svg>
  );
};

const WORKFLOW_STEPS = [
  {
    n: '01',
    tag: 'INPUT',
    title: 'Describe or upload',
    body: 'Tell rex about your project, or drop in an existing floor plan to start from.',
  },
  {
    n: '02',
    tag: 'GENERATE',
    title: 'Envelope & bubbles',
    body: 'rex calculates the buildable envelope and generates bubble diagrams matched to your program.',
  },
  {
    n: '03',
    tag: 'AGENT',
    title: 'Design natively in Revit',
    body: 'rex doesn’t just read your model — it makes design changes directly inside Revit. The first AI agent that edits, not just analyzes.',
    accent: true,
  },
  {
    n: '04',
    tag: 'DELIVER',
    title: 'Compare & export',
    body: 'Compare alternatives side by side. Export a marked-up, presentation-ready set.',
  },
];

const HowItWorks = () => (
  <section id="workflow" className="how">
    <div className="how__head">
      <Mono>OUR WORKFLOW</Mono>
    </div>

    <h2 className="h2">The first AI agent that doesn't just<br />analyze — it <em>designs</em> in Revit.</h2>

    <ol className="wsteps">
      {WORKFLOW_STEPS.map((s, i) => (
        <li key={s.n} className={`wstep ${s.accent ? 'wstep--accent' : ''}`}>
          <div className="wstep__top">
            <span className="wstep__n">{s.n}</span>
            <Mono className="wstep__tag">{s.tag}</Mono>
          </div>
          <div className="wstep__icon"><WorkflowIcon which={i} accent={s.accent} /></div>
          <h3 className="wstep__title">{s.title}</h3>
          <p className="wstep__body">{s.body}</p>
          {s.accent && (
            <span className="wstep__pill mono">
              <span className="wstep__pill-dot" />
              Agent step
            </span>
          )}
        </li>
      ))}
    </ol>
  </section>
);

// -----------------------------------------------------------------------------
// BOTTOM CTA — dark market section with call to action
// -----------------------------------------------------------------------------

const BottomCta = () => (
  <section className="bottom-cta">
    <Mono className="bottom-cta__kicker">GET STARTED</Mono>
    <h2 className="bottom-cta__h">
      Built to integrate with<br />
      <em>your</em> firm's workflow.
    </h2>
    <p className="bottom-cta__body">
      rex plugs into the tools your team already uses — tailored to your clients,
      your jurisdictions, and your project types. We'll configure it around
      how you actually work.
    </p>
    <a href="mailto:ryanw2@andrew.cmu.edu" className="btn btn--primary btn--lg bottom-cta__btn">
      Talk to the team
      <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
        <path d="M2 7 H12 M8 3 L12 7 L8 11" stroke="currentColor" strokeWidth="1.2" fill="none" />
      </svg>
    </a>
  </section>
);

// -----------------------------------------------------------------------------
// FOOTER — minimal (rex wordmark + socials)
// -----------------------------------------------------------------------------

const Footer = () => (
  <footer className="ftr--min">
    <a href="#" className="ftr__wordmark-sm">rex</a>
    <nav className="ftr__socials">
      <a href="https://www.linkedin.com/company/rex" target="_blank" rel="noopener noreferrer" className="ftr__social-link" aria-label="LinkedIn">
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.41v1.56h.05c.48-.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.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45z" />
        </svg>
      </a>
      <a href="mailto:ryanw2@andrew.cmu.edu" className="ftr__social-link" aria-label="Email">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="2" y="4" width="20" height="16" rx="2" />
          <path d="M22 5l-10 8L2 5" />
        </svg>
      </a>
    </nav>
  </footer>
);

// -----------------------------------------------------------------------------
// APP
// -----------------------------------------------------------------------------

const App = () => {
  // Reveal-on-view for line-draw callouts and section animations (kept for the
  // workflow / future sections; harmless when no [data-reveal] is present)
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) {
          e.target.classList.add('is-in');
          io.unobserve(e.target);
        }
      }
    }, { threshold: 0.18 });
    document.querySelectorAll('[data-reveal]').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Header />
      <main>
        <Hero />
        <TeamBar />
        <Problem />
        <Carousel />
        <HowItWorks />
        <BottomCta />
      </main>
      <Footer />
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);