// Custom inline SVG icons.
// Generic shapes that EVOKE Google services / messaging without recreating
// trademarked logos. All icons are 24×24 stroked outlines unless noted.

const __strokeProps = {
  fill: 'none',
  stroke: 'currentColor',
  strokeWidth: 1.7,
  strokeLinecap: 'round',
  strokeLinejoin: 'round',
};

const Icon = ({ children, size = 24, color, style, ...rest }) => (
  <svg width={size} height={size} viewBox="0 0 24 24"
       style={{ color, ...style }} {...__strokeProps} {...rest}>
    {children}
  </svg>
);

const IconChat = (p) => (
  <Icon {...p}>
    <path d="M4 6a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-5l-4 4v-4H7a3 3 0 0 1-3-3z" />
  </Icon>
);

const IconCalendar = (p) => (
  <Icon {...p}>
    <rect x="3.5" y="5" width="17" height="15" rx="2.5" />
    <path d="M8 3v4M16 3v4M3.5 10h17" />
    <circle cx="8" cy="14" r=".9" fill="currentColor" stroke="none" />
    <circle cx="12" cy="14" r=".9" fill="currentColor" stroke="none" />
    <circle cx="16" cy="14" r=".9" fill="currentColor" stroke="none" />
  </Icon>
);

const IconDrive = (p) => (
  <Icon {...p}>
    <path d="M3 7.5a2 2 0 0 1 2-2h4.5l2 2.5H19a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
  </Icon>
);

const IconSheet = (p) => (
  <Icon {...p}>
    <rect x="4" y="3" width="16" height="18" rx="2" />
    <path d="M4 9h16M4 14h16M9 9v12M15 9v12" />
  </Icon>
);

const IconReceipt = (p) => (
  <Icon {...p}>
    <path d="M6 3h12v18l-2-1.5-2 1.5-2-1.5-2 1.5-2-1.5L6 21z" />
    <path d="M9 8h6M9 12h6M9 16h4" />
  </Icon>
);

const IconCheck = (p) => (
  <Icon {...p}>
    <path d="M4.5 12.5 9 17l11-11" />
  </Icon>
);

const IconCheckCircle = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="9" />
    <path d="M8 12.5 11 15.5 16 9.5" />
  </Icon>
);

const IconCross = (p) => (
  <Icon {...p}>
    <path d="M6 6l12 12M18 6l-12 12" />
  </Icon>
);

const IconYen = (p) => (
  <Icon {...p}>
    <path d="M6 4l6 9 6-9M6 14h12M6 18h12M12 13v8" />
  </Icon>
);

const IconArrow = (p) => (
  <Icon {...p}>
    <path d="M5 12h14M13 6l6 6-6 6" />
  </Icon>
);

const IconArrowDown = (p) => (
  <Icon {...p}>
    <path d="M12 5v14M6 13l6 6 6-6" />
  </Icon>
);

const IconClock = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="9" />
    <path d="M12 7v5l3.2 2.2" />
  </Icon>
);

const IconBolt = (p) => (
  <Icon {...p}>
    <path d="M13 3 5 14h6l-1 7 8-11h-6z" />
  </Icon>
);

const IconShield = (p) => (
  <Icon {...p}>
    <path d="M12 3 5 6v6c0 4.5 3 7.5 7 9 4-1.5 7-4.5 7-9V6z" />
    <path d="M9 12.5 11.5 15 16 10" />
  </Icon>
);

const IconNoMonthly = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="9" />
    <path d="M6 6l12 12" />
    <path d="M9 10v3M12 9v5M15 8v7" />
  </Icon>
);

const IconUsers = (p) => (
  <Icon {...p}>
    <circle cx="9" cy="8" r="3.2" />
    <path d="M3.5 19c.7-3 3-5 5.5-5s4.8 2 5.5 5" />
    <circle cx="17" cy="9" r="2.4" />
    <path d="M14.8 19c.4-2 2-3.5 4-3.7" />
  </Icon>
);

const IconStar = (p) => (
  <Icon {...p}>
    <path d="m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.5 2.9 1-6.1L3.2 9.5l6.1-.9z" />
  </Icon>
);

const IconPlus = (p) => (
  <Icon {...p}>
    <path d="M12 5v14M5 12h14" />
  </Icon>
);

const IconMinus = (p) => (
  <Icon {...p}>
    <path d="M5 12h14" />
  </Icon>
);

const IconSparkle = (p) => (
  <Icon {...p}>
    <path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6" />
  </Icon>
);

const IconCamera = (p) => (
  <Icon {...p}>
    <path d="M3.5 8.5A2 2 0 0 1 5.5 6.5h2L9 4.5h6L16.5 6.5h2A2 2 0 0 1 20.5 8.5v9a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z" />
    <circle cx="12" cy="13" r="3.5" />
  </Icon>
);

const IconBuilding = (p) => (
  <Icon {...p}>
    <path d="M5 21V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v16" />
    <path d="M15 9h2a2 2 0 0 1 2 2v10" />
    <path d="M5 21h14" />
    <path d="M8 7h2M8 11h2M8 15h2" />
  </Icon>
);

// Generic "G-services" tile (NOT Google's logos). A filled rounded square with
// a single-letter glyph and a soft halo — meant to read as "external service"
// in a connection diagram.
const ServiceTile = ({ label, glyph, color, size = 56 }) => (
  <div style={{
    width: size, height: size,
    borderRadius: size * 0.28,
    background: '#fff',
    border: '1px solid var(--c-line)',
    boxShadow: 'var(--shadow-sm)',
    display: 'grid', placeItems: 'center',
    gap: 0, position: 'relative',
  }} aria-label={label}>
    <div style={{ color, width: size * 0.52, height: size * 0.52 }}>
      {glyph}
    </div>
  </div>
);

// Official-style brand logos as <img> tags. Use these where the brand should
// be visually recognised (hero badges, connection diagram, chat-card headers).
// Keep the line-icon versions (IconCalendar etc.) for decorative contexts.
const LogoImg = ({ src, alt, size = 24, style }) => (
  <img src={src} alt={alt} width={size} height={size}
       style={{ display: 'block', objectFit: 'contain', ...style }} />
);
const LogoCalendar = (p) => <LogoImg src="assets/logo-calendar.png" alt="Googleカレンダー" {...p} />;
const LogoDrive    = (p) => <LogoImg src="assets/logo-drive.png"    alt="Googleドライブ"  {...p} />;
const LogoSheet    = (p) => <LogoImg src="assets/logo-sheet.png"    alt="スプレッドシート" {...p} />;
const LogoGmail    = (p) => <LogoImg src="assets/gmail-logo.png"    alt="Gmail"           {...p} />;

// LINE brand icon. On WHITE/light surfaces use the full logo as-is (green square).
// On GREEN buttons use the same logo — the matching green outer blends with the
// button, leaving the white speech-bubble visible. Add a tiny soft "halo" via
// CSS in styles.css to keep it crisp regardless.
const LogoLine = ({ size = 24, style, ...rest }) => (
  <img src="assets/logo-line.png" alt="LINE" width={size} height={size}
       className="logo-line"
       style={{ display: 'block', objectFit: 'contain', borderRadius: size * 0.22, ...style }}
       {...rest} />
);

Object.assign(window, {
  Icon,
  IconChat, IconCalendar, IconDrive, IconSheet, IconReceipt,
  IconCheck, IconCheckCircle, IconCross, IconYen,
  IconArrow, IconArrowDown, IconClock, IconBolt, IconShield,
  IconNoMonthly, IconUsers, IconStar, IconPlus, IconMinus,
  IconSparkle, IconCamera, IconBuilding,
  ServiceTile,
  LogoCalendar, LogoDrive, LogoSheet, LogoGmail, LogoLine,
});