import React from «react»;
import { Card, CardContent } from «@/components/ui/card»;
import { Button } from «@/components/ui/button»;
import { Input } from «@/components/ui/input»;
import { Tabs, TabsList, TabsTrigger, TabsContent } from «@/components/ui/tabs»;
import { Table, TableHead, TableRow, TableHeader, TableBody, TableCell } from «@/components/ui/table»;

export default function CrussisB2BPortal() {
return (

Sykkelhuset B2B Portal – Crussis Elsykler

  <Tabs defaultValue="catalog">
    <TabsList className="mb-4">
      <TabsTrigger value="catalog">Produktkatalog</TabsTrigger>
      <TabsTrigger value="orders">Ordrehistorikk</TabsTrigger>
      <TabsTrigger value="resources">Ressurser</TabsTrigger>
    </TabsList>

    {/* Produktkatalog */}
    <TabsContent value="catalog">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {[1, 2, 3].map((id) => (
          <Card key={id}>
            <CardContent className="p-4">
              <img src={`https://via.placeholder.com/400x250?text=Crussis+${id}`} alt="Elsykkel" className="rounded-xl mb-2" />
              <h2 className="text-xl font-semibold">Crussis e-SYKKEL {id}</h2>
              <p className="text-sm text-muted">Motor: Bafang | Rekkevidde: 120 km</p>
              <p className="mt-2 font-bold text-green-600">På lager – 8 stk</p>
              <div className="mt-3 flex items-center justify-between">
                <p className="text-sm">Forhandlerpris: <span className="font-semibold">NOK 18 900,-</span></p>
                <Button>Legg i ordre</Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </TabsContent>

    {/* Ordrehistorikk */}
    <TabsContent value="orders">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Ordre-ID</TableHead>
            <TableHead>Dato</TableHead>
            <TableHead>Antall</TableHead>
            <TableHead>Status</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableCell>#1031</TableCell>
            <TableCell>12.05.2025</TableCell>
            <TableCell>5 sykler</TableCell>
            <TableCell>Sendt</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>#1025</TableCell>
            <TableCell>02.05.2025</TableCell>
            <TableCell>2 sykler</TableCell>
            <TableCell>Behandles</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </TabsContent>

    {/* Ressurser */}
    <TabsContent value="resources">
      <ul className="list-disc list-inside text-sm space-y-2">
        <li><a href="#" className="text-blue-600 underline">Produktkatalog PDF</a></li>
        <li><a href="#" className="text-blue-600 underline">Monteringsveiledning</a></li>
        <li><a href="#" className="text-blue-600 underline">Logo og markedsmateriell</a></li>
      </ul>
    </TabsContent>
  </Tabs>
</div>

);
}