// V4 — Studio
// Harvey-esque centered hero + Liquid Brokers pastel mesh.
// Serif headline, AI prompt composer as the centerpiece, floating glass
// cards peeking at the edges with live project stats.

const v4 = {
  stage: '#efeae3',
  canvas: '#ffffff',
  ink: '#0f0f0f',
  ink2: '#4a4a46',
  ink3: '#8a8882',
  ink4: '#c9c6bf',
  line: '#ebe7de',
  line2: '#f2efe7',
  sans: '"Inter Tight", -apple-system, sans-serif',
  serif: '"Instrument Serif", Georgia, serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};

function V4Studio() {
  return (
    <div style={{
      width: '100%', height: '100%', background: v4.stage,
      fontFamily: v4.sans, color: v4.ink, fontSize: 13,
      padding: 18, position: 'relative', overflow: 'hidden',
      letterSpacing: '-0.005em',
    }}>
      {/* inner canvas with rounded corners */}
      <div style={{
        width: '100%', height: '100%', background: v4.canvas,
        borderRadius: 24, position: 'relative', overflow: 'hidden',
        boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04)',
      }}>
        <V4Mesh />
        <V4Nav />
        <V4Hero />
        <V4FloatStats />
        <V4FloatSources />
      </div>
    </div>
  );
}

function V4Mesh() {
  // Soft pastel mesh gradient — center-bias blobs
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      background: `
        radial-gradient(900px 520px at 50% 58%, rgba(195,210,255,0.55), rgba(195,210,255,0) 62%),
        radial-gradient(720px 460px at 74% 68%, rgba(230,200,240,0.45), rgba(230,200,240,0) 64%),
        radial-gradient(680px 420px at 28% 46%, rgba(215,230,245,0.50), rgba(215,230,245,0) 66%),
        radial-gradient(520px 380px at 82% 30%, rgba(245,220,210,0.35), rgba(245,220,210,0) 66%),
        radial-gradient(620px 440px at 18% 78%, rgba(225,220,245,0.38), rgba(225,220,245,0) 64%)
      `,
    }} />
  );
}

function V4Nav() {
  return (
    <div style={{
      position: 'relative', zIndex: 2,
      display: 'flex', alignItems: 'center',
      padding: '22px 36px',
    }}>
      <div style={{
        fontFamily: v4.serif, fontSize: 22, letterSpacing: '-0.01em',
      }}>Contro</div>

      <div style={{
        marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 32,
        fontSize: 13, color: v4.ink2, fontWeight: 500,
      }}>
        {[
          ['Platform', true], ['Solutions', true], ['Customers', false],
          ['Security', false], ['Resources', true], ['About', true],
        ].map(([n, caret]) => (
          <span key={n} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            {n}{caret && <span style={{ fontSize: 9, color: v4.ink3 }}>▾</span>}
          </span>
        ))}
      </div>

      <div style={{ marginLeft: 32, display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ fontSize: 13, color: v4.ink2, fontWeight: 500 }}>Login</div>
        <div style={{
          padding: '8px 16px', background: v4.ink, color: '#fff',
          borderRadius: 999, fontSize: 12, fontWeight: 500,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          Request a demo
          <span style={{
            width: 16, height: 16, borderRadius: '50%', background: '#fff',
            color: v4.ink, display: 'grid', placeItems: 'center', fontSize: 10,
          }}>→</span>
        </div>
      </div>
    </div>
  );
}

function V4Hero() {
  return (
    <div style={{
      position: 'relative', zIndex: 2,
      padding: '40px 36px 0',
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      textAlign: 'center',
    }}>
      {/* eyebrow pill */}
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '5px 12px 5px 6px',
        background: 'rgba(255,255,255,0.65)',
        backdropFilter: 'blur(8px)',
        border: '1px solid rgba(255,255,255,0.7)',
        borderRadius: 999, fontSize: 11, color: v4.ink2, fontWeight: 500,
        boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
        marginBottom: 24,
      }}>
        <span style={{
          padding: '2px 8px', background: v4.ink, color: '#fff',
          borderRadius: 999, fontSize: 10, letterSpacing: '0.04em', fontWeight: 500,
        }}>NEW</span>
        Contro Agents now execute field workflows end-to-end &nbsp;·&nbsp; <span style={{ color: v4.ink, textDecoration: 'underline', textUnderlineOffset: 2 }}>Learn more</span>
      </div>

      {/* Headline — Harvey-style two-tone */}
      <div style={{
        fontFamily: v4.serif, fontSize: 56, lineHeight: 1.02,
        letterSpacing: '-0.025em', maxWidth: 920, fontWeight: 400,
      }}>
        <span style={{ color: v4.ink }}>Contro is AI built for construction.</span>
        <br />
        <span style={{ color: v4.ink3 }}>
          Run schedules, budgets and crews from one&nbsp;calm&nbsp;surface.
        </span>
      </div>

      {/* Sub */}
      <div style={{
        marginTop: 20, fontSize: 14, color: v4.ink2, maxWidth: 620,
        lineHeight: 1.55,
      }}>
        Ask Contro about any project in plain language. It reads your drawings,
        invoices, daily logs, and the weather — then drafts the next move.
      </div>

      {/* Prompt composer */}
      <V4Composer />

      {/* used by */}
      <div style={{
        marginTop: 26, display: 'flex', alignItems: 'center', gap: 14,
        fontSize: 12, color: v4.ink2,
      }}>
        <div style={{ display: 'flex' }}>
          {['#c7a98e', '#8da8c4', '#b89dbf', '#a4b99a'].map((c, i) => (
            <div key={i} style={{
              width: 22, height: 22, borderRadius: '50%', background: c,
              border: '2px solid #fff', marginLeft: i ? -6 : 0,
            }} />
          ))}
        </div>
        Trusted by 4,200+ general contractors
        <span style={{ color: v4.ink3 }}>·</span>
        <span>SOC 2 Type II</span>
        <span style={{ color: v4.ink3 }}>·</span>
        <span>ISO 27001</span>
      </div>
    </div>
  );
}

function V4Composer() {
  return (
    <div style={{
      marginTop: 36,
      width: 720, background: '#fff',
      border: `1px solid ${v4.line}`,
      borderRadius: 18, padding: '14px 16px 12px',
      boxShadow: '0 20px 60px rgba(40,40,80,0.10), 0 4px 14px rgba(40,40,80,0.06), 0 0 0 1px rgba(255,255,255,0.6) inset',
      textAlign: 'left',
      position: 'relative', zIndex: 3,
    }}>
      {/* top row — project pill + prompts dropdown */}
      <div style={{
        display: 'flex', alignItems: 'center',
        fontSize: 11, color: v4.ink3, padding: '2px 4px 10px',
      }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          Project <span style={{ color: v4.ink3 }}>▾</span>
          <span style={{
            marginLeft: 4, padding: '2px 8px', background: v4.line2,
            color: v4.ink, borderRadius: 999, fontSize: 11, fontWeight: 500,
          }}>Harborview, Blk B</span>
        </span>
        <span style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6 }}>
          Prompts <span style={{ color: v4.ink3 }}>▾</span>
        </span>
      </div>

      {/* prompt */}
      <div style={{
        fontSize: 15, lineHeight: 1.6, color: v4.ink, padding: '2px 4px 12px',
        fontFamily: v4.sans,
      }}>
        We're trending 3 days behind on framing at Harborview. Pull the likely causes from the daily logs, crew attendance and weather, and draft a recovery plan plus a client update to&nbsp;R.&nbsp;Calloway.
        <span style={{
          display: 'inline-block', width: 2, height: 16,
          background: v4.ink, marginLeft: 2, verticalAlign: 'text-bottom',
          animation: 'blink 1s steps(2) infinite',
        }} />
      </div>

      {/* toolbar */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 16,
        padding: '10px 4px 0', borderTop: `1px solid ${v4.line2}`,
      }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, color: v4.ink2 }}>
          <span style={{ fontSize: 13 }}>⎙</span> Files
        </span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, color: v4.ink2 }}>
          <span style={{ fontSize: 13 }}>⎘</span> Sources
        </span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, color: v4.ink2 }}>
          <span style={{ fontSize: 13 }}>✎</span> Improve
        </span>

        <span style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ color: v4.ink3, fontSize: 14 }}>⤢</span>
          <span style={{ color: v4.ink3, fontSize: 14 }}>⇌</span>
          <span style={{
            width: 30, height: 30, borderRadius: '50%', background: v4.ink,
            color: '#fff', display: 'grid', placeItems: 'center', fontSize: 13,
          }}>→</span>
        </span>
      </div>

      {/* integrations chips */}
      <div style={{
        display: 'flex', gap: 8, justifyContent: 'center',
        marginTop: 16, paddingTop: 14, borderTop: `1px solid ${v4.line2}`,
      }}>
        {[
          { c: '#0f0f0f', t: 'Plans vault' },
          { c: '#a06b3d', t: 'Procore' },
          { c: '#c93838', t: 'QuickBooks' },
          { c: '#2d6fc1', t: 'Autodesk' },
          { c: '#4a8a5f', t: 'Weather' },
        ].map((chip) => (
          <div key={chip.t} style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '5px 12px 5px 8px',
            border: `1px solid ${v4.line}`, borderRadius: 999,
            fontSize: 11, color: v4.ink2, background: '#fff',
          }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: chip.c }} />
            {chip.t}
            <span style={{ color: v4.ink3, fontSize: 12 }}>+</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function V4FloatStats() {
  // Frosted card — bottom-right, peeking in
  return (
    <div style={{
      position: 'absolute', right: 34, bottom: 34, zIndex: 4,
      width: 260, padding: '16px 18px',
      background: 'rgba(255,255,255,0.7)',
      backdropFilter: 'blur(16px)',
      border: '1px solid rgba(255,255,255,0.8)',
      borderRadius: 18,
      boxShadow: '0 14px 44px rgba(40,40,80,0.10), 0 2px 8px rgba(40,40,80,0.06)',
    }}>
      <div style={{
        fontSize: 11, color: v4.ink2, marginBottom: 6,
        display: 'flex', alignItems: 'center', gap: 6,
      }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#15803d' }} />
        Live · 12 projects
      </div>
      <div style={{
        fontFamily: v4.serif, fontSize: 30, letterSpacing: '-0.015em', lineHeight: 1.15, marginBottom: 4,
      }}>
        Saves 11 hrs<br/>per PM, weekly.
      </div>
      <div style={{ fontSize: 11, color: v4.ink2, lineHeight: 1.5 }}>
        Based on 62,000+ daily log entries analyzed last month.
      </div>

      <div style={{
        marginTop: 14, paddingTop: 12, borderTop: `1px solid ${v4.line2}`,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{
          fontFamily: v4.mono, fontSize: 22, color: v4.ink, fontWeight: 500,
        }}>$4.2M</div>
        <div style={{ fontSize: 11, color: v4.ink2, lineHeight: 1.35 }}>
          avoided in<br/>overruns · 2026 YTD
        </div>
      </div>
    </div>
  );
}

function V4FloatSources() {
  // Small frosted pill — bottom-left, another peeking card
  return (
    <div style={{
      position: 'absolute', left: 34, bottom: 54, zIndex: 4,
      width: 240, padding: '14px 16px',
      background: 'rgba(255,255,255,0.65)',
      backdropFilter: 'blur(14px)',
      border: '1px solid rgba(255,255,255,0.8)',
      borderRadius: 16,
      boxShadow: '0 10px 30px rgba(40,40,80,0.08), 0 2px 6px rgba(40,40,80,0.05)',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: v4.ink2, marginBottom: 10,
      }}>
        <span style={{
          width: 22, height: 22, borderRadius: 6,
          background: v4.ink, color: '#fff',
          display: 'grid', placeItems: 'center', fontSize: 11, fontFamily: v4.mono, fontWeight: 600,
        }}>C</span>
        Reading from…
        <span style={{ marginLeft: 'auto', color: v4.ink3, fontSize: 11, fontFamily: v4.mono }}>14</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 11 }}>
        {[
          ['Daily log · Apr 17–20',  '4 entries'],
          ['Crew attendance',        '41 of 44'],
          ['Weather · NOAA',         '1.1" rain'],
          ['PO-0338 · Marley',       '3d delay'],
          ['Drawings rev D',         '14 sheets'],
        ].map(([t, m]) => (
          <div key={t} style={{ display: 'flex', fontSize: 11, alignItems: 'center', gap: 8 }}>
            <span style={{ width: 4, height: 4, borderRadius: '50%', background: v4.ink4 }} />
            <span style={{ flex: 1, color: v4.ink }}>{t}</span>
            <span style={{ color: v4.ink3, fontFamily: v4.mono, fontSize: 10 }}>{m}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { V4Studio });