// Strategico Consultants — Use Case Template (3 layout variants)
// Print-ready US Letter (8.5x11" → 816x1056 @ 96dpi)
//
// Renders a single UseCase given content + tweak settings + variant.
// Variants:
//   editorial → single-column, generous whitespace, big numerals
//   grid      → tri-column, banner header, hexagon glyphs
//   split     → navy sidebar + right rail, teal accent rules, hexagon watermark

const BRAND = {
  navy: '#0F2A4B',
  blue: '#0B4E8D',
  steel: '#8AA4BF',
  teal: '#5ED3B0',
  bgWash: '#EEF4FB',
  paper: '#FFFFFF',
  ink: '#0F2A4B',
  muted: '#4A6079',
  rule: '#C3D3E3'
};

// ---------- shared bits ----------

const Hex = ({ size = 16, fill = BRAND.blue, stroke = 'none', strokeWidth = 0, style }) =>
<svg width={size} height={size * 1.1547} viewBox="0 0 100 115.47" style={style}>
    <polygon points="50,0 100,28.87 100,86.6 50,115.47 0,86.6 0,28.87" fill={fill} stroke={stroke} strokeWidth={strokeWidth} />
  </svg>;


// Hexagon cluster used as decorative element (echoes the logo mark)
const HexCluster = ({ scale = 1, palette = ['steel', 'blue', 'navy'], style }) => {
  // build a 4-row tilted cluster like the logo
  const c = (col) => BRAND[col];
  const cells = [
  // [col, row, colorIdx]
  [0, 0, 0], [1, 0, 1], [2, 0, 0],
  [-0.5, 1, 1], [0.5, 1, 2], [1.5, 1, 0], [2.5, 1, 1],
  [0, 2, 2], [1, 2, 0], [2, 2, 1],
  [0.5, 3, 0], [1.5, 3, 2]];

  const s = 28 * scale;
  const hexW = s;
  const hexH = s * 1.1547;
  return (
    <div style={{ position: 'relative', width: hexW * 4, height: hexH * 3.5, ...style }}>
      {cells.map(([x, y, ci], i) =>
      <div key={i} style={{
        position: 'absolute',
        left: x * hexW * 0.88,
        top: y * hexH * 0.75
      }}>
          <Hex size={hexW} fill={c(palette[ci % palette.length])} />
        </div>
      )}
    </div>);

};

const HexOutlineWatermark = ({ size = 380, color = 'rgba(255,255,255,0.08)' }) =>
<svg width={size} height={size} viewBox="0 0 400 400" style={{ position: 'absolute' }}>
    {[0, 1, 2, 3].map((r) =>
  [0, 1, 2, 3].map((c) => {
    const cx = 50 + c * 80 + r % 2 * 40;
    const cy = 50 + r * 70;
    return (
      <polygon
        key={`${r}-${c}`}
        points={`${cx},${cy - 35} ${cx + 30},${cy - 17.5} ${cx + 30},${cy + 17.5} ${cx},${cy + 35} ${cx - 30},${cy + 17.5} ${cx - 30},${cy - 17.5}`}
        fill="none" stroke={color} strokeWidth="1.2" />);


  })
  )}
  </svg>;


const Logo = ({ variant = 'light', height = 28 }) => {
  const src = variant === 'dark' ? 'assets/logo-on-dark.png' : variant === 'ko' ? 'assets/logo-ko-white.png' : 'assets/logo-on-light.png';
  return <img src={src} alt="Strategico Consultants" style={{ ...{ height, display: 'block', width: "300px", objectFit: "none" }, width: "200px", objectFit: "scale-down", height: "100px" }} />;
};

// Section header label per tweak: numbered / lettered / plain / glyph
const headerPrefix = (style, idx) => {
  if (style === 'numbered') return String(idx + 1).padStart(2, '0');
  if (style === 'lettered') return ['A', 'B', 'C'][idx];
  if (style === 'glyph') return 'hex';
  return null;
};

const SectionPrefix = ({ style, idx, accent, large = false }) => {
  const p = headerPrefix(style, idx);
  if (!p) return null;
  if (p === 'hex') return <Hex size={large ? 22 : 14} fill={accent} style={{ marginRight: large ? 14 : 10, verticalAlign: 'middle' }} />;
  return (
    <span style={{
      fontFamily: 'Barlow, sans-serif',
      fontWeight: 700,
      color: accent,
      fontSize: large ? '28px' : '13px',
      letterSpacing: large ? '-0.01em' : '0.08em',
      marginRight: large ? 18 : 10,
      display: 'inline-block',
      lineHeight: 1
    }}>{p}</span>);

};

// ---------- Variant 1: Editorial Minimal ----------
const EditorialVariant = ({ content, tweaks }) => {
  const { accent, headerStyle, headingFont, bodyFont, density } = tweaks;
  const pad = density === 'rich' ? 64 : density === 'minimal' ? 88 : 76;
  const gap = density === 'rich' ? 36 : density === 'minimal' ? 56 : 46;
  const bodySize = density === 'rich' ? 13.5 : density === 'minimal' ? 14.5 : 14;

  return (
    <div style={{
      width: '100%', height: '100%', background: BRAND.paper, color: BRAND.ink,
      fontFamily: `${bodyFont}, sans-serif`,
      padding: `${pad - 20}px ${pad}px ${pad - 10}px`,
      boxSizing: 'border-box', position: 'relative', display: 'flex', flexDirection: 'column'
    }}>
      {/* header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 38 }}>
        <Logo variant="light" height={28} />
        <div style={{
          fontFamily: 'Barlow, sans-serif', fontSize: 10, letterSpacing: '0.18em',
          color: BRAND.muted, fontWeight: 700, textTransform: 'uppercase', marginTop: 6
        }}>
          Use Case · 2026
        </div>
      </div>

      {/* eyebrow + title */}
      <div style={{
        fontFamily: 'Barlow, sans-serif', fontSize: 11, letterSpacing: '0.22em',
        color: accent, fontWeight: 700, textTransform: 'uppercase', marginBottom: 16
      }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
          <Hex size={9} fill={accent} />
          {content.eyebrow}
        </span>
      </div>
      <h1 style={{
        fontFamily: `${headingFont}, sans-serif`,
        fontWeight: 700, fontSize: 44, lineHeight: 1.04, letterSpacing: '-0.02em',
        margin: 0, color: BRAND.navy, maxWidth: '92%',
        textWrap: 'balance'
      }}>{content.title}</h1>

      <div style={{
        marginTop: 18, height: 2, width: 64, background: accent
      }} />

      {/* sections */}
      <div style={{ marginTop: gap, display: 'flex', flexDirection: 'column', gap: gap }}>
        {content.sections.map((sec, i) =>
        <div key={sec.label} style={{ display: 'grid', gridTemplateColumns: '110px 1fr', gap: 24, alignItems: 'baseline' }}>
            <div>
              <SectionPrefix style={headerStyle} idx={i} accent={accent} large />
            </div>
            <div>
              <h2 style={{
              fontFamily: `${headingFont}, sans-serif`,
              fontWeight: 700, fontSize: 22, lineHeight: 1.1, letterSpacing: '-0.01em',
              margin: '0 0 12px 0', color: BRAND.navy
            }}>{sec.label}</h2>
              <p style={{
              fontFamily: `${bodyFont}, sans-serif`,
              fontSize: bodySize, lineHeight: 1.62, color: BRAND.muted, margin: 0,
              textWrap: 'pretty'
            }}>{sec.body}</p>
            </div>
          </div>
        )}
      </div>

      {/* footer */}
      <div style={{ marginTop: 'auto', paddingTop: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: `1px solid ${BRAND.rule}` }}>
        <div style={{ fontFamily: 'Barlow, sans-serif', fontSize: 10, letterSpacing: '0.14em', color: BRAND.muted, fontWeight: 700, textTransform: 'uppercase' }}>
          Strategico Consultants
        </div>
        <div style={{ fontFamily: 'Barlow, sans-serif', fontSize: 10, color: BRAND.muted, fontWeight: 400 }}>
          strategico-consultants.com
        </div>
      </div>
    </div>);

};

// ---------- Variant 2: Tri-Column Grid ----------
const GridVariant = ({ content, tweaks }) => {
  const { accent, headerStyle, headingFont, bodyFont, density } = tweaks;
  const cardPad = density === 'rich' ? 24 : density === 'minimal' ? 32 : 28;
  const cardGap = density === 'rich' ? 14 : density === 'minimal' ? 22 : 18;
  const bodySize = density === 'rich' ? 12 : density === 'minimal' ? 13 : 12.5;

  return (
    <div style={{
      width: '100%', height: '100%', background: BRAND.paper, color: BRAND.ink,
      fontFamily: `${bodyFont}, sans-serif`,
      display: 'flex', flexDirection: 'column', boxSizing: 'border-box', position: 'relative'
    }}>
      {/* Navy banner header */}
      <div style={{
        background: BRAND.navy, color: '#fff',
        padding: '40px 56px 44px',
        position: 'relative', overflow: 'hidden'
      }}>
        {/* hexagon decoration top-right */}
        <div style={{ position: 'absolute', right: -30, top: -40, opacity: 0.9 }}>
          <HexCluster scale={0.7} palette={['blue', 'steel', 'steel']} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 26, position: 'relative' }}>
          <Logo variant="dark" height={28} />
          <div style={{
            fontFamily: 'Barlow, sans-serif', fontSize: 10, letterSpacing: '0.22em',
            color: BRAND.steel, fontWeight: 700, textTransform: 'uppercase'
          }}>Use Case</div>
        </div>
        <div style={{
          fontFamily: 'Barlow, sans-serif', fontSize: 11, letterSpacing: '0.22em',
          color: accent, fontWeight: 700, textTransform: 'uppercase', marginBottom: 10,
          position: 'relative'
        }}>{content.eyebrow}</div>
        <h1 style={{
          fontFamily: `${headingFont}, sans-serif`,
          fontWeight: 700, fontSize: 38, lineHeight: 1.06, letterSpacing: '-0.02em',
          margin: 0, color: '#fff', maxWidth: '78%', textWrap: 'balance',
          position: 'relative'
        }}>{content.title}</h1>
      </div>

      {/* 3 cards */}
      <div style={{
        flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
        gap: cardGap, padding: `40px 56px 44px`,
        background: BRAND.paper
      }}>
        {content.sections.map((sec, i) =>
        <div key={sec.label} style={{
          background: BRAND.bgWash,
          border: `1px solid ${BRAND.rule}`,
          padding: cardPad,
          display: 'flex', flexDirection: 'column', position: 'relative'
        }}>
            {/* hexagon icon top */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
              <div style={{ position: 'relative', width: 32, height: 36 }}>
                <Hex size={32} fill={i === 1 ? accent : BRAND.navy} />
                <div style={{
                position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff', fontFamily: 'Barlow, sans-serif', fontWeight: 700, fontSize: 13
              }}>{String(i + 1).padStart(2, '0')}</div>
              </div>
              {headerStyle !== 'numbered' && headerStyle !== 'plain' &&
            <SectionPrefix style={headerStyle} idx={i} accent={accent === BRAND.teal ? BRAND.blue : accent} />
            }
            </div>
            <h2 style={{
            fontFamily: `${headingFont}, sans-serif`,
            fontWeight: 700, fontSize: 18, lineHeight: 1.1, letterSpacing: '-0.005em',
            margin: '0 0 12px 0', color: BRAND.navy
          }}>{sec.label}</h2>
            <p style={{
            fontFamily: `${bodyFont}, sans-serif`,
            fontSize: bodySize, lineHeight: 1.55, color: BRAND.muted, margin: 0,
            textWrap: 'pretty'
          }}>{sec.body}</p>
          </div>
        )}
      </div>

      {/* footer */}
      <div style={{ padding: '0 56px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontFamily: 'Barlow, sans-serif', fontSize: 10, letterSpacing: '0.14em', color: BRAND.muted, fontWeight: 700, textTransform: 'uppercase' }}>
          Strategico Consultants
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Hex size={8} fill={accent} />
          <div style={{ fontFamily: 'Barlow, sans-serif', fontSize: 10, color: BRAND.muted }}>strategico-consultants.com</div>
        </div>
      </div>
    </div>);

};

// ---------- Variant 3: Split-Screen Rich ----------
const SplitVariant = ({ content, tweaks }) => {
  const { accent, headerStyle, headingFont, bodyFont, density } = tweaks;
  const sectionGap = density === 'rich' ? 24 : density === 'minimal' ? 40 : 32;
  const bodySize = density === 'rich' ? 12.5 : density === 'minimal' ? 13.5 : 13;
  const sidebarW = 280;

  return (
    <div style={{
      width: '100%', height: '100%', background: BRAND.paper, color: BRAND.ink,
      fontFamily: `${bodyFont}, sans-serif`,
      display: 'flex', boxSizing: 'border-box', position: 'relative'
    }}>
      {/* Navy sidebar */}
      <div style={{
        width: sidebarW, background: BRAND.navy, color: '#fff',
        padding: '44px 32px', display: 'flex', flexDirection: 'column',
        position: 'relative', overflow: 'hidden'
      }}>
        {/* watermark hex pattern */}
        <div style={{ position: 'absolute', right: -120, top: 80, pointerEvents: 'none' }}>
          <HexOutlineWatermark size={420} color="rgba(138,164,191,0.13)" />
        </div>
        <Logo variant="dark" height={26} />
        <div style={{
          fontFamily: 'Barlow, sans-serif', letterSpacing: '0.22em',
          color: BRAND.steel, fontWeight: 700, textTransform: 'uppercase',
          marginTop: 48, marginBottom: 14,
          position: 'relative', fontSize: "12px"
        }}>{content.eyebrow}</div>
        <h1 style={{
          fontFamily: `${headingFont}, sans-serif`,
          fontWeight: 700, fontSize: 32, lineHeight: 1.06, letterSpacing: '-0.02em',
          margin: 0, color: '#fff', textWrap: 'balance', position: 'relative'
        }}>{content.title}</h1>
        <div style={{ marginTop: 18, height: 3, width: 48, background: accent, position: 'relative' }} />

        {/* TOC */}
        <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 14, position: 'relative' }}>
          {content.sections.map((sec, i) =>
          <div key={sec.label} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
              fontFamily: 'Barlow, sans-serif', fontWeight: 700, fontSize: 11,
              color: accent, letterSpacing: '0.08em', width: 22
            }}>{String(i + 1).padStart(2, '0')}</div>
              <div style={{
              fontFamily: 'Barlow, sans-serif', fontWeight: 700, fontSize: 13,
              color: '#fff', letterSpacing: '0.02em'
            }}>{sec.label}</div>
            </div>
          )}
        </div>

        <div style={{ marginTop: 'auto', position: 'relative' }}>
          <div style={{
            fontFamily: 'Barlow, sans-serif', fontSize: 9, letterSpacing: '0.2em',
            color: BRAND.steel, fontWeight: 700, textTransform: 'uppercase'
          }}>Case Library · 2026</div>
        </div>
      </div>

      {/* Right column */}
      <div style={{
        flex: 1, padding: '56px 56px 44px', display: 'flex', flexDirection: 'column', position: 'relative'
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: sectionGap }}>
          {content.sections.map((sec, i) =>
          <div key={sec.label}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 10 }}>
                <SectionPrefix style={headerStyle} idx={i} accent={accent} />
                <h2 style={{
                fontFamily: `${headingFont}, sans-serif`,
                fontWeight: 700, fontSize: 22, lineHeight: 1.1, letterSpacing: '-0.01em',
                margin: 0, color: BRAND.navy
              }}>{sec.label}</h2>
              </div>
              {/* teal rule */}
              <div style={{ height: 2, width: 36, background: accent, margin: '0 0 14px 0' }} />
              <p style={{
              fontFamily: `${bodyFont}, sans-serif`,
              fontSize: bodySize, lineHeight: 1.6, color: BRAND.muted, margin: 0,
              textWrap: 'pretty', maxWidth: '60ch'
            }}>{sec.body}</p>
            </div>
          )}
        </div>

        {/* footer */}
        <div style={{ marginTop: 'auto', paddingTop: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <Hex size={10} fill={BRAND.navy} />
            <Hex size={10} fill={BRAND.blue} />
            <Hex size={10} fill={accent} />
          </div>
          <div style={{ fontFamily: 'Barlow, sans-serif', fontSize: 10, color: BRAND.muted, letterSpacing: '0.06em' }}>
            strategico-consultants.com
          </div>
        </div>
      </div>
    </div>);

};

// ---------- Page wrapper ----------
const UseCasePage = ({ variant, content, tweaks }) => {
  const Body = variant === 'editorial' ? EditorialVariant : variant === 'grid' ? GridVariant : SplitVariant;
  return (
    <div style={{
      width: 816, height: 1056, background: BRAND.paper,
      overflow: 'hidden', position: 'relative',
      boxShadow: '0 1px 3px rgba(15,42,75,0.08)'
    }}>
      <Body content={content} tweaks={tweaks} />
    </div>);

};

Object.assign(window, {
  UseCasePage, EditorialVariant, GridVariant, SplitVariant,
  BRAND, Hex, HexCluster, HexOutlineWatermark, Logo
});