// LandingPage.jsx — PROYECTO Landing
// Big wordmark + about line. Loads after password-gated terminal entry.

const LandingPage = () => {
  const cmsContent = (typeof useCMSContent === 'function') ? useCMSContent() : null;
  const landing = (cmsContent && cmsContent.landing) || {
    title: 'PROYECTO',
    titleColor: '#ffffff',
    aboutLabel: 'ABOUT',
    aboutLabelColor: 'var(--accent, #e6351e)',
    about: 'A private production facility in Los Angeles. Pre-viz suites, rehearsal studios, and event space purpose-built for touring artists and the teams who design their shows and experiences.',
    location: 'LOS ANGELES · PRIVATE FACILITY',
  };

  const [wordmarkVisible, setWordmarkVisible] = React.useState(false);
  const [aboutVisible, setAboutVisible]       = React.useState(false);
  const [metaVisible, setMetaVisible]         = React.useState(false);
  const [about, setAbout]                     = React.useState('');
  const [isMobile, setIsMobile]               = React.useState(!!window.__IS_MOBILE);

  React.useEffect(() => {
    if (typeof window.__onMobileChange === 'function') {
      return window.__onMobileChange(setIsMobile);
    }
  }, []);

  // Staggered reveal — matches Terminal.jsx pacing
  React.useEffect(() => {
    const t1 = setTimeout(() => setWordmarkVisible(true), 120);
    const t2 = setTimeout(() => {
      setAboutVisible(true);
      // Typewriter the about line
      let i = 0;
      const full = landing.about || '';
      const interval = setInterval(() => {
        i++;
        setAbout(full.slice(0, i));
        if (i >= full.length) clearInterval(interval);
      }, 18);
      return () => clearInterval(interval);
    }, 700);
    const t3 = setTimeout(() => setMetaVisible(true), 1600);
    return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
  }, [landing.about]);

  return (
    <div style={ls.wrap}>

      {/* Corner brackets — match terminal */}
      <div style={{ ...ls.corner, top: 72, left: 24, borderTop: '1px solid #1a1a1a', borderLeft: '1px solid #1a1a1a' }} />
      <div style={{ ...ls.corner, top: 72, right: 24, borderTop: '1px solid #1a1a1a', borderRight: '1px solid #1a1a1a' }} />
      <div style={{ ...ls.corner, bottom: 24, left: 24, borderBottom: '1px solid #1a1a1a', borderLeft: '1px solid #1a1a1a' }} />
      <div style={{ ...ls.corner, bottom: 24, right: 24, borderBottom: '1px solid #1a1a1a', borderRight: '1px solid #1a1a1a' }} />

      {/* Top-right meta */}
      <div style={{
        ...ls.topMeta,
        opacity: metaVisible ? 1 : 0,
        ...(isMobile ? { top: 60, right: 20, fontSize: 9 } : {}),
      }}>
        <div>LOS ANGELES</div>
        <div>proyecto.la</div>
        <div style={ls.metaDivider} />
        <div style={{ color: 'var(--accent, #e6351e)' }}>SYS · OPERATIONAL</div>
      </div>

      {/* Center block — wordmark + about */}
      <div style={{
        ...ls.center,
        ...(isMobile ? { padding: '0 20px', gap: 22 } : {}),
      }}>
        <div style={{
          ...ls.wordmark,
          color: landing.titleColor || '#ffffff',
          opacity: wordmarkVisible ? 1 : 0,
          transform: wordmarkVisible ? 'translateY(0)' : 'translateY(12px)',
          ...(isMobile ? { fontSize: 'clamp(24px, 7vw, 30px)', whiteSpace: 'nowrap', lineHeight: 0.95 } : {}),
        }}>
          {landing.title || 'PROYECTO'}
        </div>

        <div style={{...ls.accentRule, ...(isMobile ? { width: '60%', maxWidth: 260 } : {})}} />

        <div style={{ ...ls.aboutWrap, opacity: aboutVisible ? 1 : 0 }}>
          <div style={ls.aboutLabel}>
            <span style={{ color: landing.aboutLabelColor || 'var(--accent, #e6351e)' }}>&gt;</span>
            <span style={{ color: landing.aboutLabelColor || 'var(--accent, #e6351e)' }}>&nbsp;{landing.aboutLabel || 'ABOUT'}</span>
          </div>
          <div style={{...ls.aboutText, ...(isMobile ? { fontSize: 15, lineHeight: 1.55 } : {})}}>
            {about}
            {about.length < (landing.about || '').length && about.length > 0 && <span style={ls.miniCursor} />}
          </div>
        </div>
      </div>

      {/* Bottom-left — location / footer */}
      <div style={{
        ...ls.footerLeft,
        opacity: metaVisible ? 1 : 0,
        ...(isMobile ? { bottom: 28, left: 22, fontSize: 9 } : {}),
      }}>
        {landing.location || 'LOS ANGELES · PRIVATE FACILITY'}
      </div>

      {/* Bottom-right — prompt to explore (hidden on mobile since nav is already visible) */}
      {!isMobile && (
        <div style={{ ...ls.footerRight, opacity: metaVisible ? 1 : 0 }}>
          <span style={{ color: 'var(--accent, #e6351e)' }}>▸</span>&nbsp;SELECT STUDIO FROM NAV
        </div>
      )}
    </div>
  );
};

const ls = {
  wrap: {
    minHeight: '100vh', width: '100%',
    background: '#050402', position: 'relative',
    paddingTop: 48, // clear the fixed nav
    overflow: 'hidden',
    fontFamily: "'Share Tech Mono', monospace",
    color: '#fff',
  },
  corner: {
    position: 'absolute', width: 16, height: 16,
    pointerEvents: 'none', zIndex: 1,
  },
  topMeta: {
    position: 'absolute', top: 72, right: 48,
    fontSize: 10, color: '#3a3a3a',
    letterSpacing: '0.15em', textTransform: 'uppercase',
    textAlign: 'right', lineHeight: 1.9,
    transition: 'opacity 700ms linear',
    zIndex: 3,
  },
  metaDivider: {
    width: 28, height: 1, background: '#1a1a1a',
    marginLeft: 'auto', marginTop: 10, marginBottom: 10,
  },
  center: {
    position: 'absolute',
    top: '50%', left: 0, right: 0,
    transform: 'translateY(-50%)',
    padding: '0 48px',
    display: 'flex', flexDirection: 'column',
    alignItems: 'flex-start', gap: 32,
    zIndex: 2,
  },
  wordmark: {
    fontFamily: "'Cindie2', sans-serif",
    fontWeight: 700, // Cindie2-Z, matches brand
    fontSize: 'clamp(24px, 6vw, 120px)',
    letterSpacing: '0.02em',
    textTransform: 'uppercase',
    color: '#fff',
    lineHeight: 1,
    whiteSpace: 'nowrap',
    transition: 'opacity 700ms linear, transform 700ms cubic-bezier(0.25,0,0.35,1)',
    userSelect: 'none',
  },
  accentRule: {
    height: 1, width: '40%', maxWidth: 420,
    background: 'linear-gradient(90deg, var(--accent, #e6351e) 0%, #333 60%, transparent 100%)',
  },
  aboutWrap: {
    maxWidth: 640,
    transition: 'opacity 400ms linear',
  },
  aboutLabel: {
    fontSize: 10, color: '#555',
    letterSpacing: '0.24em', textTransform: 'uppercase',
    marginBottom: 14,
    fontFamily: "'Share Tech Mono', monospace",
  },
  aboutText: {
    fontFamily: "'Neogrotesk Pro', 'Helvetica Neue', sans-serif",
    fontSize: 17, lineHeight: 1.6,
    color: '#cfcfcf', letterSpacing: '0.01em',
    minHeight: 80,
  },
  miniCursor: {
    display: 'inline-block', width: 8, height: 14,
    background: 'var(--accent, #e6351e)',
    animation: 'blink 1.1s step-end infinite',
    marginLeft: 4, verticalAlign: 'middle',
  },
  footerLeft: {
    position: 'absolute', bottom: 40, left: 52,
    fontSize: 10, color: '#444',
    letterSpacing: '0.18em', textTransform: 'uppercase',
    transition: 'opacity 700ms linear',
    pointerEvents: 'none', zIndex: 1,
  },
  footerRight: {
    position: 'absolute', bottom: 40, right: 48,
    fontSize: 10, color: '#444',
    letterSpacing: '0.18em', textTransform: 'uppercase',
    transition: 'opacity 700ms linear',
    pointerEvents: 'none', zIndex: 1,
  },
};

Object.assign(window, { LandingPage });