cat > index.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TCS FleetSense — Damage Claims Portal</title>
<style>
body { font-family: Arial, sans-serif; margin:0; background:#0d1b2e; color:#fff; }
.header { background:#1A3C6E; padding:20px 40px; }
.header h1 { margin:0; font-size:1.4rem; }
.header p { margin:4px 0 0; font-size:0.9rem; color:#a8c8e8; }
.hero { padding:60px 40px; text-align:center; }
.hero h2 { font-size:2rem; margin-bottom:10px; }
.hero p { color:#a8c8e8; max-width:600px; margin:0 auto; }
.badge { display:inline-block; background:#C8902A; color:#fff;
padding:4px 14px; border-radius:12px; font-size:.8rem; margin-top:14px; }
</style>
</head>
<body>
<div class="header">
<h1>TCS FleetSense — Damage Claims Portal</h1>
<p>Trailer & Tanker Leasing | Claims & Dispute Resolution</p>
</div>
<div class="hero">
<h2>Gemini-Powered Claims Assistant</h2>
<p>Check claim status, understand your charge breakdown,
or raise a formal dispute — available 24/7.</p>
<span class="badge">Powered by Google Customer Engagement Suite</span>
</div>
<link rel="stylesheet" href="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/themes/df-messenger-default.css">
<script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
<df-messenger
location="us-central1"
project-id="tcs-1771309632463"
agent-id="31d38488-2147-48c0-8f43-e0edbb592627"
language-code="en"
max-query-length="-1">
<df-messenger-chat-bubble chat-title="DamageClaimsAssistant">
</df-messenger-chat-bubble>
</df-messenger>
<style>
df-messenger {
z-index: 999;
position: fixed;
--df-messenger-font-color: #000;
--df-messenger-font-family: Google Sans;
--df-messenger-chat-background: #f3f6fc;
--df-messenger-message-user-background: #d3e3fd;
--df-messenger-message-bot-background: #fff;
bottom: 16px;
right: 16px;
}
</style>
</body>
</html>
EOF






